理解JS封裝

CastlePeaK 發布于2019-08-19 18:04 / 2281人閱讀

摘要：把屬性和函數封裝成一個對象，然后從原型對象生成實例對象原始模式構造函數模式模式原始模式根據上述規格生成實例或者寫一個函數直接返回對象的實例該方法的問題是沒有建立實例之間的關系構造函數模式配合操作符，將綁定在實例對象上實例的屬性將指向構造函數

把屬性和函數封裝成一個對象，然后從原型對象生成實例對象

原始模式

構造函數模式

prototype模式

原始模式

var Person = {
    name: "",
    age: ""
};

根據上述規格生成實例：

var p1 = {
    name: "Oliver",
    age: 18
};
var p2 = {
    name: "Troy",
    age: 24
};

或者寫一個函數直接返回對象的實例：

function Person(name, age) {
    return {
        name: name,
        age: age
    };
}
var p1 = Person("Oliver", 18);
var p2 = Person("Troy", 24);

該方法的問題是沒有建立實例之間的關系

構造函數模式

this配合new操作符，將this綁定在實例對象上：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p1 = new Person("Oli", 18);
var p2 = new Person("Tro", 24);

實例的constructor屬性將指向構造函數：

console.log(p1.constructor); //Person(){}

instanceof運算符檢驗是否為該原型對象的實例：

console.log(p1 instanceof Person); //True

該方法會重復占用內存

prototype模式

可以把重復的，不變的屬性和方法（就是共有的，不是私有的）放在原型的prototype對象上：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function() {
    console.log(this.name);
};
Person.prototype.nationality = "Chinese";
var p1 = new Person("Oli", 18);
var p2 = new Person("Tro", 24);
p2.sayName(); //Tro
console.log(p1.nationality); //Chinese

GPU云服務器云服務器 js循環理解 js閉包的理解 js事件監聽怎么理解 js封裝

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

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

《深入理解ES6》筆記——用模塊封裝代碼（13）

摘要：模塊的定義模塊是自動運行在嚴格模式下并且沒有辦法退出運行的代碼。數據模塊函數模塊類模塊模塊的導出給數據函數類添加一個，就能導出模塊。數據模塊函數模塊類模塊模塊的引用在另外的文件中，我們可以引用上面定義的模塊。導入指定的模塊。模塊的定義模塊是自動運行在嚴格模式下并且沒有辦法退出運行的JavaScript代碼。模塊可以是函數、數據、類，需要指定導出的模塊名，才能被其他模塊訪問。 //...

Mr_houzi 2019-08-20 18:28 評論0 收藏0
《深入理解ES6》筆記——用模塊封裝代碼（13）

摘要：模塊的定義模塊是自動運行在嚴格模式下并且沒有辦法退出運行的代碼。數據模塊函數模塊類模塊模塊的導出給數據函數類添加一個，就能導出模塊。數據模塊函數模塊類模塊模塊的引用在另外的文件中，我們可以引用上面定義的模塊。導入指定的模塊。模塊的定義模塊是自動運行在嚴格模式下并且沒有辦法退出運行的JavaScript代碼。模塊可以是函數、數據、類，需要指定導出的模塊名，才能被其他模塊訪問。 //...

tunny 2019-08-29 13:05 評論0 收藏0
深入理解 Javascript 之 JS的封裝

摘要：封裝常見的封裝類中的共有和私有執行結果如下原因是調用的時候，指向的其實是，因此沒有輸出解決辦法更改指向工廠函數也有對于程序員來說這三個關鍵字應該是很熟悉的哈，但是在中，并沒有類似于這樣的關鍵字，但是我們又希望我們定義的屬性和方法有一定的訪問封裝常見的封裝 function Person (name,age,sex){ this.name = name; this.a...

張漢慶 2019-08-23 10:55 評論0 收藏0
深入理解ES6之《用模塊封裝代碼》

摘要：導入模塊的代碼執行后，實例化過的模塊被保存在內存中，只要另一個語句引用它就可以重復使用它和的一個重要的限制是它們必須在其它語句和函數之外使用，也就是說不允許出現在語句中，不能有條件導出或以任何方式動態導出。什么是模塊模塊是自動運行在嚴格模式下并且沒有辦法退出運行的Javascript代碼在模塊的頂部this的值是undefined 其模塊不支持html風格的代碼注釋除非用def...

BigTomato 2019-08-20 18:58 評論0 收藏0