摘要:如果重設(shè)構(gòu)造函數(shù)的原型對(duì)象,那么,會(huì)切斷新的原型對(duì)象和任何之前已經(jīng)存在的構(gòu)造函數(shù)實(shí)例之間的聯(lián)系,它們引用的仍然是最初的原型。說明返回的對(duì)象與構(gòu)造函數(shù)或者與構(gòu)造函數(shù)的原型屬性沒有關(guān)系。
說明:
此摘要筆記系列是我最近看《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》隨手所記。
里面分條列舉了一些我認(rèn)為重要的、需要記下的、對(duì)我有幫助的點(diǎn),是按照我看的順序來的。
摘要筆記本身沒有系統(tǒng)性,沒有全面性可言,寫在這里供有一定基礎(chǔ)的前端開發(fā)者參考交流。
里面的知識(shí)點(diǎn)、例子大部分來源于本書,或者延伸出來的,都經(jīng)過我的測(cè)試是對(duì)的,但是沒辦法保證100%正確,如果有人看到錯(cuò)誤的地方,希望指出來,謝謝。
用這種方法如果不設(shè)置原型的 constructor 屬性,則原型的 constructor 屬性跟普通對(duì)象一樣,指向 Object,
如:
var Person = function () {} Person.prototype = { name: "abc", sayHello: function () { console.log("hello") } } Person.prototype.constructor === Person // false Person.prototype.constructor === Object // true var ming = new Person() ming.constructor === Person // false ming.constructor === Object // true ming.__proto__ === Person.prototype // true ming instanceof Person // true
之后的表現(xiàn)跟在原生的原型對(duì)象上添加屬性一樣,
如:
var Person = function () {} Person.prototype = { constructor: Person, name: "abc", sayHello: function () { console.log("hello") } } Person.prototype.constructor === Person // true var ming = new Person() ming.constructor === Person // true ming.__proto__ === Person.prototype // true ming instanceof Person // true
但是,重設(shè) constructor 屬性會(huì)導(dǎo)致它的 [[Enumerable]] 特性被設(shè)置成 true,變成可枚舉的。
這個(gè)問題可以用 Object.defineProperty() 來改正。
如:
var Person = function () {} Person.prototype = { name: "abc", sayHello: function () { console.log("hello") } } Object.defineProperty(Person.prototype, "constructor", { enumerable: false, value: Person })2. 原型的動(dòng)態(tài)性
如果不重設(shè)構(gòu)造函數(shù)的 prototype 原型對(duì)象,那么,我們對(duì)原型對(duì)象的任何修改都能夠反映到實(shí)例上,即使先創(chuàng)建實(shí)例后修改原型。
如果重設(shè)構(gòu)造函數(shù)的 prototype 原型對(duì)象,那么,會(huì)切斷新的原型對(duì)象和任何之前已經(jīng)存在的構(gòu)造函數(shù)實(shí)例之間的聯(lián)系,它們引用的仍然是最初的原型。
3. 組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建自定義類型的最常用方式,就是組合使用構(gòu)造函數(shù)模式和原型模式。構(gòu)造函數(shù)用于定義實(shí)例屬性,原型模式用于定義方法和共享的屬性。
好處:每個(gè)實(shí)例都會(huì)有自己的實(shí)例屬性的副本,同時(shí)又共享著對(duì)方法的引用,最大限度的節(jié)省了內(nèi)存。
還支持向構(gòu)造函數(shù)傳遞參數(shù)。
如:
function Person (name, age) { this.name = name this.age = age this.friends = ["Ming", "Li"] } Person.prototype = { constructor: Person, sayName: function () { console.log(this.name) } } var zhang = new Person("zhang", 12) var yang = new Person("yang", 15) zhang.friends.push("wang") console.log(zhang.friends) // ["Ming", "Li", "wang"] console.log(yang.friends) // ["Ming", "Li"] zhang.sayName === yang.sayName // true4. 動(dòng)態(tài)原型模式
如:
function Person (name, age) { this.name = name this.age = age if (typeof this.sayName !== "function") { Person.prototype.sayName = function () { console.log(this.name) } } } // 注意在用這種模式時(shí),不能使用對(duì)象字面量重寫原型。5. 寄生構(gòu)造函數(shù)模式
這種模式的基本思想就是創(chuàng)建一個(gè)函數(shù),該函數(shù)的作用僅僅是封裝創(chuàng)建對(duì)象的代碼,然后再返回新創(chuàng)建的對(duì)象。但從表面看,這個(gè)函數(shù)很像構(gòu)造函數(shù)。
如:
function Person (name, age) { var person = { name: name, age: age, sayName: function () { console.log(this.name) } } return person } var ming = new Person("ming", 12) ming.sayName() // "ming" ming instanceof Person // false ming instanceof Object // true ming.__proto__ === Object.prototype // true ming.constructor === Object // true
注意:這個(gè)模式除了使用new操作符并把包裝的函數(shù)叫做構(gòu)造函數(shù)外,跟工廠模式是一摸一樣的。
說明:返回的對(duì)象與構(gòu)造函數(shù)或者與構(gòu)造函數(shù)的原型屬性沒有關(guān)系。
(因?yàn)椴皇褂胣ew操作符,所以函數(shù)名稱就不首字母大寫了)
穩(wěn)妥構(gòu)造函數(shù)模式與寄生構(gòu)造函數(shù)類似,但有兩點(diǎn)不同:一是新創(chuàng)建的實(shí)例方法不引用this;二是不使用new操作符調(diào)用構(gòu)造函數(shù)。
如:
function person (name, age) { var o = {} o.sayName = function () { console.log(name) } return o; } var ming = person("ming", 12) ming.sayName() // "ming" ming instanceof person // false ming instanceof Object // true
注意:在這里除了調(diào)用 sayName 方法,沒有其它辦法訪問 name 的值
說明:同寄生構(gòu)造函數(shù)模式,返回的對(duì)象與構(gòu)造函數(shù)或者與構(gòu)造函數(shù)的原型屬性沒有關(guān)系。
關(guān)于對(duì)象原型部分結(jié)束。下一篇是繼承相關(guān)的內(nèi)容
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/91658.html
摘要:關(guān)于對(duì)象定義了全局對(duì)象。支持的瀏覽器有除了接受要序列化的對(duì)象外,還可以接受另外兩個(gè)參數(shù)。如果是數(shù)值,則表示每個(gè)級(jí)別縮進(jìn)的空格數(shù),最大,超過的值自動(dòng)轉(zhuǎn)換成。字符串長(zhǎng)度超過,結(jié)果中將只出現(xiàn)前個(gè)字符。會(huì)在結(jié)果字符串中插入換行符提高可讀性。 關(guān)于JSON 1. JSON 對(duì)象 es5 定義了全局對(duì)象 JSON。支持的瀏覽器有 IE8+ 、Firefox 3.5+ 、Safari 4+、Chro...
摘要:說明此摘要筆記系列是我最近看高級(jí)程序設(shè)計(jì)第版隨手所記。摘要筆記本身沒有系統(tǒng)性,沒有全面性可言,寫在這里供有一定基礎(chǔ)的前端開發(fā)者參考交流。對(duì)每一項(xiàng)運(yùn)行給定函數(shù),返回該函數(shù)會(huì)返回的項(xiàng)組成的數(shù)組。是的反操作是的反操作第一部分結(jié)束。 說明: 此摘要筆記系列是我最近看《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》隨手所記。 里面分條列舉了一些我認(rèn)為重要的、需要記下的、對(duì)我有幫助的點(diǎn),是按照我看...
摘要:函數(shù)表達(dá)式和閉包函數(shù)聲明的一個(gè)重要特征是函數(shù)聲明提升如遞歸遞歸函數(shù)是在一個(gè)函數(shù)通過名字調(diào)用自身的情況下構(gòu)成的。注意中已經(jīng)是塊級(jí)作用域了,所以這些東西感覺實(shí)際用途沒有那么大,但是對(duì)理解閉包對(duì)作用域鏈中的屬性的引用,這一點(diǎn)還是有作用的。 函數(shù)表達(dá)式和閉包 1. 函數(shù)聲明的一個(gè)重要特征是函數(shù)聲明提升 如: sayHi() function sayHi () { console.log(h...
摘要:思路是,使用原型鏈對(duì)原型屬性和方法進(jìn)行繼承,借用構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。注意使用寄生式繼承來為對(duì)象添加函數(shù),會(huì)由于不能做到函數(shù)復(fù)用而降低效率,這一點(diǎn)與構(gòu)造函數(shù)模式類似。無論什么情況下都會(huì)調(diào)用兩次超類型的構(gòu)造函數(shù)。 說明: 此摘要筆記系列是我最近看《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》隨手所記。里面分條列舉了一些我認(rèn)為重要的、需要記下的、對(duì)我有幫助的點(diǎn),是按照我看的順序來的...
摘要:說明此摘要筆記系列是我最近看高級(jí)程序設(shè)計(jì)第版隨手所記。其中,描述符對(duì)象的屬性必須是設(shè)置其中一個(gè)或多個(gè)值,可以修改對(duì)應(yīng)的特性值。如支持的瀏覽器,可以取得指定屬性的描述符。 說明: 此摘要筆記系列是我最近看《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》隨手所記。里面分條列舉了一些我認(rèn)為重要的、需要記下的、對(duì)我有幫助的點(diǎn),是按照我看的順序來的。摘要筆記本身沒有系統(tǒng)性,沒有全面性可言,寫在這里...
閱讀 1360·2023-04-25 23:42
閱讀 2855·2021-11-19 09:40
閱讀 3534·2021-10-19 11:44
閱讀 3573·2021-10-14 09:42
閱讀 1876·2021-10-13 09:39
閱讀 3843·2021-09-22 15:43
閱讀 679·2019-08-30 15:54
閱讀 1461·2019-08-26 13:32