成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript 深入之創(chuàng)建對象

or0fun / 789人閱讀

摘要:與寄生構(gòu)造函數(shù)模式有兩點不同新創(chuàng)建的實例方法不引用不使用操作符調(diào)用構(gòu)造函數(shù)穩(wěn)妥對象最適合在一些安全的環(huán)境中。穩(wěn)妥構(gòu)造函數(shù)模式也跟工廠模式一樣,無法識別對象所屬類型。

1. 工廠模式

function createPerson(name) {
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };
 
    return o;
}
 
var person1 = createPerson("kevin");

缺點:對象無法識別,因為所有的實例都指向一個原型object

2. 構(gòu)造函數(shù)模式

function Person(name) {
    this.name = name;
    this.getName = function () {
        console.log(this.name);
    };
}
 
var person1 = new Person("kevin");

優(yōu)點:實例可以識別為一個特定的類型

缺點:每次創(chuàng)建實例時,每個方法都要被創(chuàng)建一次

2.1 構(gòu)造函數(shù)模式優(yōu)化

function Person(name) {
    this.name = name;
    this.getName = getName;
}
 
function getName() {
    console.log(this.name);
}
 
var person1 = new Person("kevin");

優(yōu)點:解決了每個方法都要被重新創(chuàng)建的問題

缺點:函數(shù)都在全局,沒有封裝可言

3. 原型模式

function Person(name) {
 
}
 
Person.prototype.name = "keivn";
Person.prototype.getName = function () {
    console.log(this.name);
};
 
var person1 = new Person();

優(yōu)點:方法不會重新創(chuàng)建

缺點:1. 所有的屬性和方法都共享 2. 不能初始化參數(shù)

補充:
Person.prototype.isPrototypeOf(person1) 判斷原型和對象的關(guān)系
Object.getPrototypeOf(person1) 獲取實例的原型
原型鏈 - 實例屬性覆蓋原型屬性
“name” in person1 對象是否能夠訪問該屬性,無論是實例還是原型中
Person1.hasOwnProperty(“name”) 是否為實例屬性
For…in… 能夠通過對象訪問,可枚舉的屬性 實例+原型
object.keys() 所有可枚舉的實例屬性
Object.getOwnPropertyNames() 所有實力屬性,無論是否可枚舉

3.1 原型模式優(yōu)化

function Person(name) {
 
}
 
Person.prototype = {
    name: "kevin",
    getName: function () {
        console.log(this.name);
    }
};
 
var person1 = new Person();

優(yōu)點:封裝性好了一點

缺點:重寫了原型,丟失了constructor屬性,此時constructor指向object的構(gòu)造函數(shù)
Instanceof 仍然可以

3.2 原型模式優(yōu)化

function Person(name) {
 
}
 
Person.prototype = {
    constructor: Person,
    name: "kevin",
    getName: function () {
        console.log(this.name);
    }
};
 
var person1 = new Person();

優(yōu)點:實例可以通過constructor屬性找到所屬構(gòu)造函數(shù)

缺點:原型模式該有的缺點還是有

還可以再優(yōu)化:constructor屬性應該是不可枚舉的
Object.defineProperty(Person.prototype, “constructor”, {

Enumerable: false,
Value: Person

})

4. 組合模式

構(gòu)造函數(shù)模式與原型模式雙劍合璧。

function Person(name) {
    this.name = name;
}
 
Person.prototype = {
    constructor: Person,
    getName: function () {
        console.log(this.name);
    }
};
 
var person1 = new Person();

優(yōu)點:該共享的共享,該私有的私有,使用最廣泛的方式,

缺點:有的人就是希望全部都寫在一起,即更好的封裝性

4.1 動態(tài)原型模式

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype.getName = function () {
            console.log(this.name);
        }
    }
}
 
var person1 = new Person();

注意:使用動態(tài)原型模式時,不能用對象字面量重寫原型
會切斷現(xiàn)有實例和新原型之間的聯(lián)系
所有信息都封裝在構(gòu)造函數(shù)中了

解釋下為什么:

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}
 
var person1 = new Person("kevin");
var person2 = new Person("daisy");
 
// 報錯 并沒有該方法
person1.getName();
 
// 注釋掉上面的代碼,這句是可以執(zhí)行的。
person2.getName();

為了解釋這個問題,假設(shè)開始執(zhí)行var person1 = new Person("kevin")。

如果對 new 和 apply 的底層執(zhí)行過程不是很熟悉,可以閱讀底部相關(guān)鏈接中的文章。

我們回顧下 new 的實現(xiàn)步驟:

首先新建一個對象

然后將對象的原型指向 Person.prototype

然后 Person.apply(obj)

返回這個對象

注意這個時候,回顧下 apply 的實現(xiàn)步驟,會執(zhí)行 obj.Person 方法,這個時候就會執(zhí)行 if 語句里的內(nèi)容,注意構(gòu)造函數(shù)的 prototype 屬性指向了實例的原型,使用字面量方式直接覆蓋 Person.prototype,并不會更改實例的原型的值,person1 依然是指向了以前的原型,而不是 Person.prototype。而之前的原型是沒有 getName 方法的,所以就報錯了!

如果你就是想用字面量方式寫代碼,可以嘗試下這種:

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
 
        return new Person(name);
    }
}
 
var person1 = new Person("kevin");
var person2 = new Person("daisy");
 
person1.getName(); // kevin
person2.getName();  // daisy

5.1 寄生構(gòu)造函數(shù)模式 - 更優(yōu)雅的方式使用工廠模式

function Person(name) {
 
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };
 
    return o;
 
}
 
var person1 = new Person("kevin");
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object)  // true

寄生構(gòu)造函數(shù)模式,我個人認為應該這樣讀:

寄生-構(gòu)造函數(shù)-模式,也就是說寄生在構(gòu)造函數(shù)的一種方法。

也就是說打著構(gòu)造函數(shù)的幌子掛羊頭賣狗肉,你看創(chuàng)建的實例使用 instanceof 都無法指向構(gòu)造函數(shù)!

這樣方法可以在特殊情況下使用。比如我們想創(chuàng)建一個具有額外方法的特殊數(shù)組,但是又不想直接修改Array構(gòu)造函數(shù),我們可以這樣寫:

function SpecialArray() {
    var values = new Array();
 
    for (var i = 0, len = arguments.length; i  len; i++) {
        values.push(arguments[i]);
    }
 
    values.toPipedString = function () {
        return this.join("|");
    };
    return values;
}
 
var colors = new SpecialArray("red", "blue", "green");
var colors2 = SpecialArray("red2", "blue2", "green2");
 
 
console.log(colors);
console.log(colors.toPipedString()); // red|blue|green
 
console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

你會發(fā)現(xiàn),其實所謂的寄生構(gòu)造函數(shù)模式就是比工廠模式在創(chuàng)建對象的時候,多使用了一個new,實際上兩者的結(jié)果是一樣的。

但是作者可能是希望能像使用普通 Array 一樣使用 SpecialArray,雖然把 SpecialArray 當成函數(shù)也一樣能用,但是這并不是作者的本意,也變得不優(yōu)雅。

在可以使用其他模式的情況下,不要使用這種模式。

但是值得一提的是,上面例子中的循環(huán):

for (var i = 0, len = arguments.length; i  len; i++) {
    values.push(arguments[i]);
}

可以替換成:

values.push.apply(values, arguments);

5.2 穩(wěn)妥構(gòu)造函數(shù)模式

function person(name){
    var o = new Object();
    o.sayName = function(){
        console.log(name);
    };
    return o;
}
 
var person1 = person("kevin");
 
person1.sayName(); // kevin
 
person1.name = "daisy";
 
person1.sayName(); // kevin
 
console.log(person1.name); // daisy

所謂穩(wěn)妥對象,指的是沒有公共屬性,而且其方法也不引用 this 的對象。

與寄生構(gòu)造函數(shù)模式有兩點不同:

新創(chuàng)建的實例方法不引用 this

不使用 new 操作符調(diào)用構(gòu)造函數(shù)

穩(wěn)妥對象最適合在一些安全的環(huán)境中。

穩(wěn)妥構(gòu)造函數(shù)模式也跟工廠模式一樣,無法識別對象所屬類型。intsanceof無意義

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/98244.html

相關(guān)文章

  • JavaScript深入執(zhí)行上下文

    摘要:深入系列第七篇,結(jié)合之前所講的四篇文章,以權(quán)威指南的為例,具體講解當函數(shù)執(zhí)行的時候,執(zhí)行上下文棧變量對象作用域鏈是如何變化的。前言在深入之執(zhí)行上下文棧中講到,當代碼執(zhí)行一段可執(zhí)行代碼時,會創(chuàng)建對應的執(zhí)行上下文。 JavaScript深入系列第七篇,結(jié)合之前所講的四篇文章,以權(quán)威指南的demo為例,具體講解當函數(shù)執(zhí)行的時候,執(zhí)行上下文棧、變量對象、作用域鏈是如何變化的。 前言 在《Jav...

    gougoujiang 評論0 收藏0
  • JavaScript深入作用域鏈

    摘要:下面,讓我們以一個函數(shù)的創(chuàng)建和激活兩個時期來講解作用域鏈是如何創(chuàng)建和變化的。這時候執(zhí)行上下文的作用域鏈,我們命名為至此,作用域鏈創(chuàng)建完畢。 JavaScript深入系列第五篇,講述作用鏈的創(chuàng)建過程,最后結(jié)合著變量對象,執(zhí)行上下文棧,讓我們一起捋一捋函數(shù)創(chuàng)建和執(zhí)行的過程中到底發(fā)生了什么? 前言 在《JavaScript深入之執(zhí)行上下文棧》中講到,當JavaScript代碼執(zhí)行一段可執(zhí)行代...

    waltr 評論0 收藏0
  • JavaScript深入變量對象

    摘要:深入系列第四篇,具體講解執(zhí)行上下文中的變量對象與活動對象。下一篇文章深入之作用域鏈本文相關(guān)鏈接深入之執(zhí)行上下文棧深入系列深入系列目錄地址。 JavaScript深入系列第四篇,具體講解執(zhí)行上下文中的變量對象與活動對象。全局上下文下的變量對象是什么?函數(shù)上下文下的活動對象是如何分析和執(zhí)行的?還有兩個思考題幫你加深印象,快來看看吧! 前言 在上篇《JavaScript深入之執(zhí)行上下文?!分?..

    Zachary 評論0 收藏0
  • JavaScript深入創(chuàng)建對象的多種方式以及優(yōu)缺點

    摘要:深入系列第十四篇,講解創(chuàng)建對象的各種方式,以及優(yōu)缺點。也就是說打著構(gòu)造函數(shù)的幌子掛羊頭賣狗肉,你看創(chuàng)建的實例使用都無法指向構(gòu)造函數(shù)這樣方法可以在特殊情況下使用。 JavaScript深入系列第十四篇,講解創(chuàng)建對象的各種方式,以及優(yōu)缺點。 寫在前面 這篇文章講解創(chuàng)建對象的各種方式,以及優(yōu)缺點。 但是注意: 這篇文章更像是筆記,因為《JavaScript高級程序設(shè)計》寫得真是太好了! 1....

    Terry_Tai 評論0 收藏0
  • JavaScript深入閉包

    摘要:深入系列第八篇,介紹理論上的閉包和實踐上的閉包,以及從作用域鏈的角度解析經(jīng)典的閉包題。定義對閉包的定義為閉包是指那些能夠訪問自由變量的函數(shù)。 JavaScript深入系列第八篇,介紹理論上的閉包和實踐上的閉包,以及從作用域鏈的角度解析經(jīng)典的閉包題。 定義 MDN 對閉包的定義為: 閉包是指那些能夠訪問自由變量的函數(shù)。 那什么是自由變量呢? 自由變量是指在函數(shù)中使用的,但既不是函數(shù)參數(shù)也...

    caige 評論0 收藏0
  • 【進階1-2期】JavaScript深入執(zhí)行上下文棧和變量對象

    摘要:本計劃一共期,每期重點攻克一個面試重難點,如果你還不了解本進階計劃,點擊查看前端進階的破冰之旅本期推薦文章深入之執(zhí)行上下文棧和深入之變量對象,由于微信不能訪問外鏈,點擊閱讀原文就可以啦。 (關(guān)注福利,關(guān)注本公眾號回復[資料]領(lǐng)取優(yōu)質(zhì)前端視頻,包括Vue、React、Node源碼和實戰(zhàn)、面試指導) 本周正式開始前端進階的第一期,本周的主題是調(diào)用堆棧,今天是第二天。 本計劃一共28期,每期...

    Richard_Gao 評論0 收藏0

發(fā)表評論

0條評論

or0fun

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<