對(duì)象原型

參考 - MDN

Javascript中的原型

在Javascript中,每一個(gè)函數(shù)都有一個(gè)特殊的屬性,叫做原型

下面獲取函數(shù)的原型fn.prototype

function f1(){} console.log(f1.prototype) /*{constructor: f f1()__proto__:{constructor: f Object()__defineGetter__: f __defineGetter__()__defineSetter__: f __defineSetter__()hasOwnProperty: f hasOwnProperty()__lookupGetter__: f __lookupGetter__()__lookupSetter__: f __lookupSetter__()isPrototypeOf: f isPrototypeOf()...}} */

下面給函數(shù)的原型添加屬性fn.prototype.hello = 'world'

function f1(){} f1.prototype.hello = 'world' console.log(f1.prototype) /*{hello: "world"constructor: f f1()__proto__: Object} */

創(chuàng)建一個(gè)函數(shù)的實(shí)例new fn(),并給實(shí)例添加屬性

function Person(){} Person.prototype.hello = 'world' var p1 = new Person() p1.say = 'hi' console.log(p1) /*{say: "Hi"__proto__:{hello: "world"constructor: f Person()__proto__: Object}} */

瀏覽器訪問某個(gè)屬性的尋找順序:

• 首先會(huì)尋找這個(gè)實(shí)例是否含有該屬性
• 如果有則返回,否則會(huì)通過__proto__尋找該實(shí)例的原型Person.prototype上是否含有該屬性.
• 如果有則返回,否則會(huì)通過__proto__.__proto__的上尋找該屬性.
• 如此循環(huán).到最后__proto__.__proto__. ... = undefined則返回undefined

理解原型對(duì)象

下面定義一個(gè)構(gòu)造器函數(shù)

function Person(first, last, age, gender, interests){this.first = firstthis.last = lastthis.age = agethis.gender = genderthis.interests = interests } var p1 = new Person("Li","Bruce",18,'男','coding') console.log(p1.__proto__ === Person.prototype) // true console.log(p1.__proto__.__proto__ === Object.prototype) // true console.log(p1) /*{first: "Li"last: "Bruce"age: 18gender: "男"interests: "coding"__proto__:{constructor: f Person(first, last, age, gender, interests)__proto__:{constructor: f Object()__defineGetter__: f __defineGetter__()...valueOf: f valueOf()...}}} */

• 此時(shí)存在一條原型鏈:

__proto____proto__p1Person.prototypeObject.prototype

此時(shí),調(diào)用如下:

p1.valueOf()

根據(jù)前面的規(guī)則:

• 瀏覽器首先檢查,p1對(duì)象是否含有valueOf()方法
• 如果沒有,則瀏覽器檢查p1對(duì)象的原型對(duì)象(Person.prototype, 通過瀏覽器提供的__proto__訪問)是否具有可用的valueOf()方法
• 如果還沒有,瀏覽器會(huì)檢查Person()構(gòu)造函數(shù)的prototype屬性所指向的對(duì)象的原型對(duì)象(Object.prototype)是否含有該方法,如果有則返回,否則返回undefined

原型鏈中的方法和屬性沒有被復(fù)制到其他對(duì)象 – 它們被訪問需要通過"原型鏈"的方式

官方并未提供__proto__屬性,在JavaScript語言標(biāo)準(zhǔn)中用[[prototype]]表示.然而,大多數(shù)現(xiàn)代瀏覽器還是提供了一個(gè)名為__proto__的屬性.

prototype屬性: 繼承成員被定義的地方

查看MDN - Object可以看到,Object有很多屬性,但是在上面的p1中,并不是全部都繼承了.

原因在于: 被繼承的屬性僅僅只是定義在Object.prototype上的屬性.定義在Object本身上的屬性是不會(huì)被繼承的

看下面的栗子:

function Person(){} console.log(Person.prototype) /*{constructor: f Person()__proto__: Object} */

默認(rèn)情況下,構(gòu)造器(此處為Person)的prototype屬性初始為空白.

靜態(tài)成員與實(shí)例成員

• 靜態(tài)成員: 在構(gòu)造函數(shù)本身上添加的成員
• 實(shí)例成員: 構(gòu)造函數(shù)內(nèi)部通過this添加的成員,只能通過實(shí)例化的對(duì)象來訪問

function Person(name, age){this.name = namethis.age = age } Person.sex = '男' var p1 = new Person('Marron', 18) // name、age就是實(shí)例成員 // sex就是靜態(tài)成員

使用prototype的好處

節(jié)約內(nèi)存.例如下述:

function Person(name, age){this.name = namethis.age = agethis.sayHi = function(){console.log('Hi ~')} } var p1 = new Person('Mar', 18) var p2 = new Person('Marron', 19)

上面通過構(gòu)造函數(shù),生成了2個(gè)實(shí)例化對(duì)象,但是兩個(gè)實(shí)例化對(duì)象的方法的內(nèi)存地址是不同的.

console.log(p1.sayHi == p2.sayHi) // false

引用prototype屬性可以節(jié)約內(nèi)存

function Person(name, age){this.name = namethis.age = age } Person.prototype.sayHi = function(){console.log('Hi ~') } var p1 = new Person('Mar', 18) var p2 = new Person('Marron', 19) console.log(p1.sayHi == p2.sayHi) // true p1.sayHi() // "Hi ~"

• 可見構(gòu)造函數(shù)通過Person.prototype類似構(gòu)造的所有對(duì)象是共享的(同一個(gè)內(nèi)存空間)

• javascript規(guī)定,每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性,指向另一個(gè)對(duì)象.

總結(jié)

以上是生活随笔為你收集整理的javascript --- 对象原型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。