第三期：基于紅皮書「創建js對象的6種方法」再討論（1）

liaoyg8023 發布于2019-08-20 15:32 / 1493人閱讀

摘要：構造函數里的作用在的時候，所謂的作用域賦給新對象，就是使用了方法。如果我們不用，也可以實現指向我們想指向的對象構造函數當做普通函數使用，構造函數當做普通函數使用，這些變式其實都是在充分了解和的用法后，自然寫出來的。

這一期所書寫的目的并不是為了介紹創建對象的方法，在紅皮書里面，例子其實很清楚。在這篇文章中，想討論一下書中細節，并沒有解釋太清楚的地方。

工廠模式

//工廠模式書本「
function createPerson(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.load=function(){
        console.log(obj.name,obj.age);
    }
    return obj;
}

var toti=createPerson("toti",18);
toti.load();
//」工廠模式書本

工廠模式的一些要點：

解決：

創建多個相似對象問題

傳參

缺點：不能識別對象類型

優化：一般使用對象字面量寫法，再返回

思考

對象暴露出來，其實也可以用，但是賦值需要重復。

包在一個函數里面，傳參方便

這個模式做了什么？

創建一個Object實例對象

為實例obj添加屬性、方法

返回實例obj

相當于使用了一個普通的函數，去讓這個對象可以復用。

書中：「不能識別對象類型」如何理解？

我們的實例，當我們去console.log(toti)的時候。但是工廠模式下，

我們去獲取這個實例的時候，只能簡單的判斷它是一個對象。這就是它一個缺點，于是我們有了后面的構造函數模式

使用對象字面量寫法優化

//工廠模式對象字面量「
function createPerson(name,age){
    var obj={
        name:name,
        age:age,
        load:function(){
            console.log(this.name,this.age);
        }
    }
    return obj;
}

var mary=createPerson("mary",18);
mary.load();
//」工廠模式對象字面量

對象字面量注意問題

this的用法

在obj對象里面，this.name&this.age指向obj的作用域的name&age

如果不使用this，則name和age，指向createPerson的作用域。

在本例中，使用this.name,name都可以，因為是傳參，所以createPerson和obj兩個作用域變量一樣

構造函數模式

//「 構造函數模式;「 構造函數當做構造函數使用，用new
function Person(name,age){
    this.name=name;
    this.age=age;
    this.load=function(){
        console.log(this.name,this.age);
    }
}

var toti=new Person("toti",18);
toti.load();
console.log(typeof toti);
// 」構造函數模式;」構造函數當做構造函數使用，用new

發生了什么？

在解釋發生的事情前，我們要先詳細了解下new的作用。在紅皮書中，new的作用，解釋的的確很淺，簡單幾行字，不細讀，很難理清其中的邏輯。

NEW的作用

紅皮書中是這樣解釋的：

創建一個新對象

將構造函數的作用域賦值給新對象

執行構造函數中的代碼

返回新對象

這幾行文字，一開始我也以為我讀懂了，但是它實在沒有很好地給讀者說明白new到底怎么用的。

在這里，我引用一個我提問中的網友的回答，下面是來自wei0613的回答：

function CO(){
    this.p = “I’m in constructed object”;
    this.alertP = function(){
        alert(this.p);
    }
}
var o2 = new CO();

var obj  ={};
obj.__proto__ = CO.prototype;
CO.call(obj);
return obj;

他用代碼形式給我們講解了其中發生了什么事：

new先創建了一個對象obj

然后CO函數的原型賦值給對象obj的原型

CO函數再使用call／apply方法把作用域賦給obj

到這一步才執行構造函數Co里面的代碼！！！

返回obj對象

大家可能第一眼，并不能發現我這里的邏輯和紅皮書的邏輯有什么區別。首先，紅皮書的邏輯中，很明顯少了原型創建發生在哪一步，如果這里不清楚，會影響大家理解接下來原型模式和動態原型模式的理解；其次，第4步是最重要的，也就是構造函數的代碼執行，是發生在第4步，call的使用和原型鏈的形成都發生在之前。如果我們僅僅只有一個大概概念，當我們遇到對象字面量重寫的時候，我們很可能發現我們代碼寫得都沒有問題，但是就是出bug的情況。這個工作流邏輯大家一定要清楚。

構造函數里this的作用

在new的時候，所謂的作用域賦給新對象，就是使用了call／apply方法。

Person.apply(obj,arguments);

this就指向了obj對象

把this的屬性方法一個個添加到obj對象里面

其他不是this的屬性和方法，都會被忽略，比如：

function Person(name, age,job){
    this.name=name;
    this.age=age;
    this.load=function(){
        console.log(this.name,this.age);
    }
    var job=job;
}

job就不會被寫入obj對象里面

注意，當我們new Person（）的時候，是把函數當作構造函數使用的，但是它也是函數，可以像普通函數一樣使用

//「 構造函數當做普通函數使用，不用new
function Person(name,age){
    this.name=name;
    this.age=age;
    this.load=function(){
        console.log(this.name,this.age);
    }
}

var mike=Person("mike",18);
//mike.load();會報錯，Person沒有對象返回
window.load();
// 」構造函數當做普通函數使用，不用new

直接使用函數，等于在當前作用域下運行。在這種情況下，我們則會把this指向這個環境的作用域，在這里是window。我們使用mike.load()會報錯，因為屬性和方法并沒有添加到mike這個對象中，而是添加到了window這個對象。

如果我們不用new，也可以實現this指向我們想指向的對象

//「 構造函數當做普通函數使用，call,apply
function Person(name,age){
    this.name=name;
    this.age=age;
    this.load=function(){
        console.log(this.name,this.age);
    }
}

var obj={};
Person.call(obj,"mike",18);
obj.load();
// 」構造函數當做普通函數使用，call,apply

這些變式其實都是在充分了解new和this的用法后，自然寫出來的。通過些變式，大家可以更好理解它們的用法。

相比工廠模式，構造函數模式的優缺點及思考

當我們console.log(toti):

我們回顧工廠模式下，是：

所以構造函數模式在這里比工廠模式更好，看到這里大家應該明白書中：「不能識別對象類型」的問題了。

構造函數模式要點

解決：可以識別為一種特定的類型

缺點：構造函數的每個方法都被實例了一遍

思考：

構造函數開頭大寫，其他函數開頭小寫

不使用new，相當于普通函數使用，this指向window，為window添加變量和方法

也可以使用call和apply來為第三方作用域添加

重點：

new

this

云服務器 GPU云服務器 java創建對象的幾種方式 js緩存的幾種方法 java5種創建對象 js創建數組的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82317.html

等風來！區塊鏈熊市，技術人就要做技術投資

摘要：年的區塊鏈牛市已經過去了，目前看來，年會是一個大熊市，投資抄幣估計也撈不著什么。熊市囤技術，其實是技術人員很好的選擇。三期同學討論積累資料的地址等風來區塊鏈熊市，技術人就要做技術投資。 2017 年的區塊鏈牛市已經過去了，目前看來，2018 年會是一個大熊市，投資抄幣估計也撈不著什么。熊市只能囤囤幣，囤囤技術，只能等下一輪風起了。熊市囤技術，其實是技術人員很好的選擇。等區塊鏈牛市來了，...

番茄西紅柿 2019-06-27 18:19 評論0 收藏0
【翻譯】理解 IPFS 白皮書第1部分

摘要：理解白皮書第部分原文鏈接哦不，白皮書加密貨幣區塊鏈世界喜愛白皮書，也不例外。要理解的工作原理，最好一步一步地學習白皮書。從開始，白皮書中明確提到了三個實現。白皮書指出小值等于或小于直接存儲在上。理解 IPFS 白皮書第 1 部分原文鏈接：https://decentralized.blog/un... 哦不，白皮書！加密貨幣 / 區塊鏈世界喜愛白皮書，IPFS 也不例外。它起...

Ilikewhite 2019-06-27 18:30 評論0 收藏0
每周前端開源推薦第三期

摘要：每周前端開源推薦第三期是一個用很炫的動畫來展示數字的庫，效果非常贊。把放在第一位是因為現在毫無疑問是最流行的實時框架。如此巨額的投資保證了開源小組高質的開發，目前版本號是。目前貌似主要面向請應用。每周前端開源推薦第三期 HubSpot / odometer Beautiful CSS3 Number Transitions #hubspot-open-source h...

littleGrow 2019-08-28 17:53 評論0 收藏0
每周前端開源推薦第三期

摘要：每周前端開源推薦第三期是一個用很炫的動畫來展示數字的庫，效果非常贊。把放在第一位是因為現在毫無疑問是最流行的實時框架。如此巨額的投資保證了開源小組高質的開發，目前版本號是。目前貌似主要面向請應用。每周前端開源推薦第三期 HubSpot / odometer Beautiful CSS3 Number Transitions #hubspot-open-source h...

senntyou 2019-08-19 14:21 評論0 收藏0
每周前端開源推薦第三期

摘要：每周前端開源推薦第三期是一個用很炫的動畫來展示數字的庫，效果非常贊。把放在第一位是因為現在毫無疑問是最流行的實時框架。如此巨額的投資保證了開源小組高質的開發，目前版本號是。目前貌似主要面向請應用。每周前端開源推薦第三期 HubSpot / odometer Beautiful CSS3 Number Transitions #hubspot-open-source h...

enrecul101 2019-08-01 14:36 評論0 收藏0