JS原型相關知識點

2021-10-24 22:17:43 字數 3349 閱讀 1906

先引入問題:

1、如何準確判斷乙個變數是陣列型別,用typeof,或者instanceof

var a = [1,2,3]; 

a instanceof array;// true

typeof a // object, typeof是無法判斷是否為陣列的,只能區分object和function

2、寫乙個原型鏈繼承的例子

例子1,比較low:

function animal()

}function dog()

}dog.prototype = new animal();// 相當於把dog.prototype.__proto__指向了animal.prototype

var littledog = new dog();

例子2,好多了:

function element(id)

// 模擬封裝下jq的html()方法:

element.prototype.html = function(val)else

}// 監聽一下

element.prototype.on = function(type, fn)

var e = new element("demo-div");

e.html("hi

").on('click', function()).on('touchstart', function())

3、描述new乙個物件到的過程

function foo(name, age)

var f = new foo('zhangsan', 20);

// p.name 是jack

var fun = function();

}var p = new fun();

// p.name是peter

var fun = function()

var p = new fun();

建構函式-擴充套件

var a = [1,2,3];

console.log(a.__proto__ === array.prototype); // true

// 說明:

// var a = [1,2,3]; 和var a = new array(1,2,3)一樣

// array是js的內建函式,引用型別變數的__proto__指向建構函式的prototype,所以兩者相等

5.當試圖得到乙個物件(引用型別)的屬性時,如果這個物件沒有這個屬性,那麼就會去它的__proto__(即它的建構函式的prototype)中尋找。

補充知識點:

1.變數被例項化後,建構函式的this和變數隱式原型中的this,都是指向被例項化的變數。

2.hasownproperty可以判斷屬性是否是物件的賦值屬性(即是是否來自原型的屬性),即通過=的方式賦值,而不是通過prototype賦值

// 變數被例項化後,建構函式的this和變數隱式原型中的this,都是指向被例項化的變數。

function person(name, age)

person.prototype.printmyname = function()

var tom = new person("tom", 20);

tom.printmyage = function()

tom.printmyname(); // tom,沒有printmyname這個屬性,就往建構函式的顯性原型中查詢

tom.printmyage(); // 20

// hasownproperty可以判斷屬性是否是物件的賦值屬性,即通過=的方式賦值,而不是通過prototype賦值

// 針對上述方法做示例

var prop

for(prop in tom)

}

原型鏈

引用型別(物件)如果找不到某個屬性或者方法,那麼就會去它的__proto__中尋找,即從建構函式的prototype中尋找。如果建構函式中沒有,就會從建構函式prototype的__proto__去查詢,示例:

function person(name, age)

person.prototype.printmyname = function()

var tom = new person("tom", 20);

tom.printmyage = function()

tom.printmyname(); // tom,沒有printmyname這個屬性,就往建構函式的顯性原型中查詢

tom.printmyage(); // 20

tom.tostring(); // 最終會找到js內建函式object.tostirng()

// 講解:

// 第一步:程式發現tom例項中沒有tostring,那麼就會查詢tom的__proto__,即person的prototype

// 第二步:發現person的prototype也沒有,那就去person.prototype的__proto__去查詢,即object的prototype(person的prototype也是物件,是object的例項)

// 第三步:發現object的prototype中有tostring(),那就呼叫了

// 附加說明:如果object的prototype中也沒有這個屬性,就會從object.prototype物件的__proto__中查詢,而js為了防止死迴圈,把object.prototype的__proto__指向了null

// 所以:

console.log(tom.__proto__); // 有值,列印的是person的建構函式

console.log(tom.__proto__.__proto__); // 有值,列印的object的建構函式

console.log(tom.__proto__.__proto__.__proto__); // null,列印的是object.prototype物件的__proto__,指向的是null

instanceof 非常重要

instanceof是用於判斷引用型別屬於哪個建構函式的方法

例如上一段**的示例:tom instanceof person // true

判斷邏輯是:tom的__proto__一層一層往上,能否對應到person.prototype

同理 tom instanceof object // true

面試知識點總結 js 原型

建構函式 原型鏈 一般情況下,屬性在物件本身上,方法在原型中 prototype 顯示原型 每個函式都有乙個prototype,為乙個空物件 稱為原型物件 無自己 寫的屬性 原型物件中有constructor,proto 兩個屬性 原型物件中的 proto 存的位址值等於object.prototy...

相關知識點

nweb inf uclasses uweb.xml ulib n 從httpservlet 繼承,重寫doget dopost方法 n部署web.xml n 只有乙個物件 n 第一次請求的時候被初始化,只一遍 n 初始化後先呼叫init 方法,只一遍 n 每個請求,呼叫一遍service serv...

原型 原型鏈 new this 知識點彙總

一 new 乙個建構函式經歷的幾個過程 1 建立乙個新物件 2 將建構函式作用域賦予新物件那 3 執行建構函式 4 返回新物件 在全域性範圍內,this指向全域性物件 瀏覽器下指window 物件函式呼叫時,this指向當前物件 全域性函式呼叫時,this指向全域性函式 使用new例項化物件時,th...