JavaScript學習之Object(下)new命令

Salamander 發布于2019-08-23 12:14 / 1388人閱讀

摘要：命令作用作用是執行構造函數，返回實例對象上面例子是自定義一個構造函數，其最大的特點就是首字母大寫，用執行構造函數其中，在的執行下，代表了實例化后的對象，這個也就有屬性注意點如果不用執行構造函數，那么指向的是全局有兩種方式可以避免內部定義嚴格

new命令 new作用

作用是執行構造函數，返回實例對象

function F() {
    this.name = "object"
}
var obj = new F();

上面例子是自定義一個構造函數，其最大的特點就是首字母大寫，用new執行構造函數；
其中this，在new的執行下，代表了實例化后的對象，這個obj也就有name屬性
注意點：如果不用new執行構造函數，那么this指向的是全局window

function F() {
    this.name = "object"
}
var obj = F();
console.log(obj);     //undefined
console.log(name);    //object

有兩種方式可以避免：

內部定義嚴格模式，當this為undefined時,添加屬性會報錯

function F() {
    this.name = "object"
}
F();
//TypeError: Cannot set property "name" of undefined

加個判斷機制

function F() {
    if(!(this instanceof F)){
        return new F();
    }
    this.name = "object"
}
F();

用new.target來判斷，在沒有用new執行時new.target返回undefined，new執行下返回構造函數自身

function F() {
    if(!new.target){
        return new F();
    }
    this.name = "object"
}
F();

簡單來說：不加new執行，this就是window；加了new執行，那么this = Object.create(F.prototype),構建一個空對象，繼承下F的原型

當構造函數內部有return時，需要分情況執行

return的內容不是對象，則忽視，返回的時this對象

function F() {
    this.name = "object"
    reutrn 123;
}
var obj = F();   //{name : "object"}

return的內容是對象時，則返回return的對象,(null除外)

function F() {
    this.name = "object"
    reutrn {a : 123};
}
var obj = F();   //{a : 123}

new的原理

前提是使用了new來執行構造函數

創建一個空對象，作為對象實例來返回

將空對象的原型鏈指向構造函數的prototype

將空對象賦值給構造函數內部的this，（this = Object.create(F.prototype)）

執行構造函數內部代碼，若return沒有返回新對象（null除外），則返回this對象

利用上述原理我們可以簡單模擬一個new的函數

        function _new(constructor, params) {
            //將arguments對象轉為數組
            var args = [].slice.call(arguments);
            //1.取出參數中的構造函數，2.過濾args，剩下對構造函數有用的實參
            var constructor = args.shift();
            //構建空對象，并繼承構造函數的原型
            var context = Object.create(constructor.prototype);
            //1.借用構造函數，將context空對象賦給this，2.并args實參與構造函數參數一一對應對其賦值，3.形成完整的this對象
            var result = constructor.apply(context, args);
            //這個是處理return返回對象時的情況
            return (typeof result === "object" && result != null) ? result : context;
        }
        function P(n) {
            var a = 1;
            this.b = n;
            //return null;
        }
        var p = _new(P,123);
        console.log(p);

云服務器 GPU云服務器學習之substr() 深度學習之概要 webrtc學習之九 linux學習之centos

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

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

JavaScript學習之Object(下)相關方法

摘要：它不區分該屬性是對象自身的屬性，還是繼承的屬性。那么我們要遍歷對象所有屬性，包括繼承以及不可遍歷的屬性，用加原型遍歷實現類似的用遞歸 Object靜態方法 Object自身方法，必須由Object調用，實例對象并不能調用 Object.getPrototypeOf() 作用是獲取目標對象的原型 function F() {}; var obj = new F(); console.lo...

amuqiao 2019-08-23 12:15 評論0 收藏0
JavaScript學習之對象原型及繼承

摘要：原型要掌握這三者之間的關系，通過代碼例子記錄一下自身屬性的這里就是通過代碼看一下做了什么默認情況下，將的所有屬性包括繼承的賦值給有什么東西呢自己的原型鏈，添加一個屬性，用來指明對象的誰構造的自身全部屬性，這邊構建一個空對象原型，所以沒有自有原型要掌握這三者之間的關系prototype，constructor,__proto__通過代碼例子記錄一下 function F() { ...

妤鋒シ 2019-08-23 12:16 評論0 收藏0
Javascript學習之繼承

摘要：繼承是面向對象編程語言中的一個重要的概念，繼承可以使得子類具有父類的屬性和方法或者重新定義追加屬性和方法等。但是在中沒有類的概念，是基于原型的語言，所以這就意味著對象可以直接從其他對象繼承。繼承是面向對象編程語言中的一個重要的概念，繼承可以使得子類具有父類的屬性和方法或者重新定義、追加屬性和方法等。但是在Javascript中沒有類的概念，是基于原型的語言，所以這就意味著對象可以直接...

CHENGKANG 2019-08-21 15:34 評論0 收藏0
JavaScript學習之JSON對象

摘要：原始類型的值只有四種字符串數值必須以十進制表示布爾值和不能使用和。字符串必須使用雙引號表示，不能使用單引號。數組或對象最后一個成員的后面，不能加逗號。 JSON對象補充記錄一下，有些方法很需要熟練記憶的 JSON對象的規定 JSON對象對值有嚴格的規定復合類型的值只能是數組或對象，不能是函數、正則表達式對象、日期對象。原始類型的值只有四種：字符串、數值（必須以十進制表示）、布爾值和...

banana_pi 2019-08-23 12:43 評論0 收藏0
Javascript學習之創建對象

摘要：在中，除了幾種原始類型外，其余皆為對象，，既然對象如此重要，那就列舉一下在中如何創建對象通過構造函數創建對象實例對象字面量對象字面量是對象定義的一種簡寫形式，目的在于簡化創建包含大量屬性的對象的過程。在Javascript中，除了幾種原始類型外，其余皆為對象（Object，Array ...），既然對象如此重要，那就列舉一下在Javascript中如何創建對象：通過Object構造...

jollywing 2019-08-21 15:34 評論0 收藏0