js面向對象-原型模式

warmcheng 發布于2019-08-23 11:25 / 3360人閱讀

摘要：理解原型對象實例指針構造函數屬性屬性原型對象，在所有支持的實現中，這個方法返回的值。但是重寫整個原型是不行的，因為切斷了構造函數與最初原型的聯系沒有問題原型對象的問題構造函數指向需要手工寫入對于引用類型來說有共享問題的錯誤

什么是原型模式

使用構造函數的 prototype 屬性來指定那些應該共享的屬性和方法。組合使用構造
函數模式和原型模式時，使用構造函數定義實例屬性，而使用原型定義共享的屬性和方法。

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

理解原型對象

實例(指針)->構造函數constructor屬性->prototype屬性->原型對象

Object.getPrototypeOf() ，在所有支持的實現中，這個

方法返回 [[Prototype]] 的值。

alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"

當為對象實例添加一個屬性時，這個屬性就會屏蔽原型對象中保存的同名屬性

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"——來自實例
alert(person2.name); //"Nicholas"——來自原型
delete person1.name;
alert(person1.name); //"Nicholas" ——

使用 hasOwnProperty()方法可以檢測一個屬性是存在于實例中，還是存在于原型中。屬性存在于對象實例中時，才會返回 true 。

function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg";
alert(person1.name); //"Greg"——來自實例
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); //"Nicholas"——來自原型
alert(person2.hasOwnProperty("name")); //false
delete person1.name;
alert(person1.name); //"Nicholas"——來自原型
alert(person1.hasOwnProperty("name")); //false

原型與in操作符

使用 in 操作符， in 操作符會在通過對象能夠訪問給定屬性時返回 true ，無論該屬性存在于實例中還是原型中。

結合使用in和hasPrototypeProperty()可以確定屬性到底是存在對象中還是原型中

function hasPrototypeProperty(object, name){
    return !object.hasOwnProperty(name) && (name in object);
}

更簡單的原型語法

為減少不必要的輸入，也為了從視覺上更好地封裝原型的功能，更常見的做法是用一個包含所有屬性和方法的對象字面量來重寫整個原型對象.

function Person() {
}
Person.prototype = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName: function () {
        alert(this.name);
    }
};
// 重設構造函數，只適用于 ECMAScript 5  兼容的瀏覽器
Object.defineProperty(Person.prototype, "constructor", {
    enumerable: false,
    value: Person
});

原型的動態性

由于在原型中查找值的過程是一次搜索，因此我們對原型對象所做的任何修改都能夠立即從實例上反映出來——即使是先創建了實例后修改原型也照樣如此。（但是重寫整個原型是不行的，因為切斷了構造函數與最初原型的聯系）

var friend = new Person();
Person.prototype.sayHi = function(){
alert("hi");
};
friend.sayHi(); //"hi"（沒有問題！）

原型對象的問題

構造函數指向需要手工寫入

對于引用類型來說有共享問題的錯誤

云服務器 GPU云服務器面向對象設計模式 js 面向對象視頻 oop面向對象 js js面向對象開發表格

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

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

JS面向對象編程之封裝

摘要：在基于原型的面向對象方式中，對象則是依靠構造函數和原型構造出來的。來看下面的例子優點與單純使用構造函數不一樣，原型對象中的方法不會在實例中重新創建一次，節約內存。我們所熟知的面向對象語言如 C++、Java 都有類的的概念，類是實例的類型模板，比如Student表示學生這種類型，而不表示任何具體的某個學生，而實例就是根據這個類型創建的一個具體的對象，比如zhangsan、lisi，由...

YFan 2019-08-23 10:35 評論0 收藏0
面向對象的JavaScript（如何一步步成為js高手）

摘要：雖然，也是面向疾苦的語言，但是，它和靜態類型語言的面向接口編程不一而足。對象對他自己的行為負責，其他對象不關心它的內部實現。 ‘工欲善其事，必先利其器’，在深入學習JavaScript之前，我認為我們很有必要了解以下，JavaScript這門面向對象的動態語言到底是一門什么樣的語言。 JavaScript vs 其他面向對象語言它沒有使用像Java等傳統的面向對象語言的類式繼承，而...

peixn 2019-08-21 18:35 評論0 收藏0
淺談JavaScript面向對象

摘要：不必在構造函數中定義對象實例的信息。其次，按照一切事物皆對象的這餓極本的面向對象的法則來說，類本身并不是一個對象，然而原型方式的構造函數和原型本身也是個對象。第二個問題就是在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。前言對象(Object)應該算是js中最為重要的部分，也是js中非常難懂晦澀的一部分。更是面試以及框架設計中各出沒。寫這篇文章，主要參考與JavaScrip...

cyixlq 2019-08-21 17:15 評論0 收藏0
JavaScript面向對象核心知識歸納

摘要：一面向對象概念面向對象就是使用對象。因此在構造函數中表示剛剛創建出來的對象。在構造函數中利用對象的動態特性為其對象添加成員。一、面向對象 1.1 概念面向對象就是使用對象。面向對象開發就是使用對象開發。面向過程就是用過程的方式進行開發。面向對象是對面向過程的封裝。 1.2 三大特性抽象性所謂的抽象性就是：如果需要一個對象描述數據，需要抽取這個對象的核心數據提出需要的核心...

TalkingData 2019-08-22 10:41 評論0 收藏0
js面向對象編程

摘要：構造函數模式通過構造函數創建的對象可以通過標識對象類型，通過檢測對象類型。實際上，應該說是沒有辦法在不影響所有對象實例的情況下，給超類型的構造函數傳遞參數。 ==什么是對象？==就是無序屬性的集合，通過屬性或者方法名與值的一一映射。==對象的屬性類型==對象中還定義了一些js中不能直接訪問的屬性，是為了實現js引擎用的。有數據屬性和訪問器屬性兩種。1.數據屬性數據屬性包含一個數據值的位...

zeyu 2019-08-23 18:29 評論0 收藏0