摘要:如果按照字面意思來理解,那么就是通過調用構造函數而創建的那個對象實例的原型對象。
創建對象方法
Object構造函數
對象字面量表示
工廠模式
構造函數模式
原型模式
構造函數模式與原型模式結合
動態原型模式
寄生構造函數模式
一、Object實例創建var person1 = new Object(); person1.name = "bob"; person1.age = "22"; person1.job = "frontend"; person1.sayName = function () { console.log(this.name); } person1.sayName(); // bob console.log(person1.age); // 22二、對象字面量表示
var person2 = { name: "bob", age: 22, job: "frontend", sayName: function () { console.log(this.name); } } person2.sayName(); // bob三、工廠模式
function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { console.log(this.name); }; return o; } var person1 = createPerson("bob", 22, "frontend"); var person2 = createPerson("lynn", 22, "doctor"); console.log(person1.name); // bob console.log(person2.name); // lynn
優點:函數封裝創建對象,無需寫重復創建對象的代碼
缺點:沒有解決對象識別的問題(怎么樣知道一個對象類型)
四、構造函數模式function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function () { console.log(this.name); } /** * 與聲明函數在邏輯上是等價的 this.sayName = new Function("console.log(this.name)"); */ } var person1 = new Person("bob", 22, "frontend"); var person2 = new Person("lynn", 22, "doctor"); console.log(person1.name); // bob console.log(person2.name); // lynn
沒有顯式地創建對象
直接將屬性和方法賦給了this對象
沒有return語句
每個方法都要在每個實例上重新創建一遍
創建新的對象
將構造函數的作用域賦給新對象,因此this就指向了這個對象
執行構造函數的代碼,為這個對象添加對象屬性和方法
返回新的對象
person1和person2分別保存著Person的一個不同的實例。這兩個對象都有一個constructor(構造函數)屬性,該屬性指向Person
console.log(person1.constructor === Person); // true console.log(person2.constructor === Person); // true
對象的constructor屬性最初是用來標識對象類型的。但是,提到檢測對象類型,還是instanceof操作符要更可靠一些
console.log(person1 instanceof Object); // true console.log(person1 instanceof Person); // true console.log(person2 instanceof Object); // true console.log(person2 instanceof Person); // true
我們在這個例子中創建的所有對象既是Object的實例,同時也是Person的實例,這一點通過instanceof操作符可以得到驗證,創建自定義的構造函數意味著將來可以將它的實例標識為一種特定的類型
// 當作構造函數使用 var person = new Person("bob", 22, "frontend"); person.sayName(); //"Nicholas" // 作為普通函數調用 Person("lynn", 22, "doctor"); // 添加到window window.sayName(); //"Greg" // 在另一個對象的作用域中調用 var o = new Object(); Person.call(o, "Kristen", 25, "Nurse"); o.sayName(); //"Kristen"
構造函數創建的對象方法,實際上執行多次函數創建,會導致不同的作用域鏈和標識符解析,如:
console.log(person1.sayName == person2.sayName); //false
創建兩個完成同樣任務的Function實例的確沒有必要;況且有this對象在,根本不用在執行代碼前就把函數綁定到特定對象上面。因此,大可像下面這樣,通過把函數定義轉移到構造函數外部來解決這個問題。
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName; } // 把sayName函數抽離出外部函數 function sayName() { console.log(this.name); }
存在問題:
所有被新創建出來的對象,都會指向全局作用域的sayName函數,如果定義N個方法,那么就要定義N個全局的方法,這就造成了封裝性的瓶頸,不過可以使用原型模式來解決
五、原型模式function Person() { } Person.prototype.name = "bob"; Person.prototype.age = 22; Person.prototype.job = "frontend"; Person.prototype.sayName = function () { return this.name } var person1 = new Person(); console.log(person1.name); // bob console.log(person1.age); // 22 console.log(person1.job); // frontend console.log(person1.sayName()); // bob console.log(person1.sayName === person2.sayName); // true
我們創建的每個函數都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。如果按照字面意思來理解,那么prototype就是通過調用構造函數而創建的那個對象實例的原型對象。使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。
六、組合使用構造函數模式和原型模式function Person(name, age, obj) { this.name = name; this.age = age; this.obj = obj; } Person.prototype = { constructor: Person, sayName: function () { console.log(this.name); } } var person1 = new Person("bob", 22, "frontend"); var person2 = new Person("lynn", 22, "doctor"); console.log(person1.name); // bob console.log(person2.name); // lynn console.log(person1.sayName === person2.sayName); // true七、動態原型模式
function Person(name, age, obj) { this.name = name; this.age = age; this.obj = obj; console.log("typeof this.sayName: ", typeof this.sayName); // 檢測sayName 是不是一個函數 // 實際上只在當前第一次時候沒有創建的時候在原型上添加sayName方法 if (typeof this.sayName != "function") { Person.prototype.sayName = function () { return this.name; } } } var person1 = new Person("bob", 22, "frontend"); var person2 = new Person("lynn", 22, "doctor"); console.log(person1.name); // bob console.log(person2.name); // lynn console.log(person1.sayName()); // bob console.log(person2.sayName()); // lynn console.log(person1.sayName === person2.sayName); // true八、寄生構造函數模式
function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { console.log(this.name); }; return o; } var person1 = new createPerson("bob", 22, "frontend"); var person2 = new createPerson("lynn", 22, "doctor"); console.log(person1.name); // bob console.log(person2.name); // lynn
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95937.html
摘要:原型式繼承利用一個空對象作為中介,將某個對象直接賦值給空對象構造函數的原型。其中表示構造函數,一個類中只能有一個構造函數,有多個會報出錯誤如果沒有顯式指定構造方法,則會添加默認的方法,使用例子如下。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導)showImg(https://segmentfault.com/img/rem...
摘要:使用也有很長一段時間但是一直以來都沒對其組件之間的通信做一個總結這次就借此總結一下。引用信息將會注冊在父組件的對象上。 使用Vue也有很長一段時間,但是一直以來都沒對其組件之間的通信做一個總結,這次就借此總結一下。 父子組件之間的通信 1)props和$emit 父組件通過props將數據下發給props,子組件通過$emit來觸發自定義事件來通知父組件進行相應的操作 具體代碼如下: ...
摘要:假定期望交換和的值序號實現方案中間變量備注按位操作符只適用類型只適用類型有腦洞先執行對象解構賦值推薦數組解構賦值簡書首發轉載請注明來自簡書 假定let a = 1,b=10;期望交換a和b的值 序號 實現方案 中間變量? 備注 1 let c; c = a; a = b; b = c; ? 2 a ^= b; b ^=a; a ^=b MDN-按位操作符, 只適...
摘要:目標追蹤首先,我們會大致介紹八種建立在上的目標跟蹤算法。詞典包含了種的目標追蹤器行。它將目標追蹤器的命令行參數字符串映射到實際的追蹤器函數上。其中行里的目的是根據追蹤器命令行參數以及從得來的相關重要信息。 雖然我們熟知的的質心追蹤器表現得很好,但它需要我們在輸入的視頻上的每一幀運行一個目標探測器。對大多數環境來說,在每幀上進行檢測非常耗費計算力。所以,我們想應用一種一次性的目標檢測方法,然后...
閱讀 2738·2021-10-11 10:57
閱讀 1569·2021-09-26 09:55
閱讀 1310·2021-09-06 15:11
閱讀 3447·2021-08-26 14:16
閱讀 662·2019-08-30 15:54
閱讀 535·2019-08-30 12:43
閱讀 3290·2019-08-29 16:18
閱讀 2565·2019-08-23 16:14