JavaScript原型怎麼理解
- hzc原創
- 2020-06-28 13:07:592561瀏覽
原型是Javascript中的繼承的基礎，JavaScript的繼承就是基於原型的繼承，函數的原型物件在JavaScript中，我們建立一個函數A，那麼瀏覽器就會在記憶體中建立一個物件B 。
一、什麼是原型
#原型是Javascript中的繼承的基礎， JavaScript的繼承就是基於原型的繼承。
1.1 函數的原型物件
在JavaScript中，我們建立一個函數A(就是宣告一個函數), 那麼瀏覽器就會在記憶體中建立一個物件B，而且每個函數都預設會有一個屬性 prototype 指向了這個物件( 即：prototype的屬性的值是這個物件 ) 。這個對象B就是函數A的原型對象，簡稱函數的原型。這個原型物件B 預設會有一個屬性 constructor 指向了這個函數A ( 意思就是說：constructor屬性的值是函數A )。
看下面的程式碼：
<body>
<script type="text/javascript">
/*
声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
有一个属性叫constructor 执行了这个函数
注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
*/
function Person () {
}
</script>
</body>下面的圖描述了宣告一個函數之後發生的事情：
1.2 使用建構函數創建物件
當把一個函數當作建構子(理論上任何函數都可以當作建構子) 使用new建立物件的時候，那麼這個物件就會存在一個預設的不可見的屬性，來指向了建構函數的原型物件。 這個看不見的屬性我們一般用 [[prototype]] 來表示，只是這個屬性沒有辦法直接存取。
看下面的程式碼：
<body>
<script type="text/javascript">
function Person () {
}
/*
利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
指向了构造函数的原型对象。
*/
var p1 = new Person();
</script>
</body>觀察下面的示意圖：
說明：
從上面的圖示可以看到，創建p1物件雖然使用的是Person建構函數，但是物件建立出來之後，這個p1物件其實已經與Person建構子沒有任何關係了，p1物件的[[ prototype ]]屬性指向的是Person建構子的原型物件。
如果使用new Person()建立多個對象，則多個物件都會同時指向Person建構函數的原型對象。
我們可以手動為這個原型物件新增屬性和方法，那麼p1,p2,p3…這些物件就會分享這些在原型中新增的屬性和方法。
如果我們存取p1中的一個屬性name，如果在p1物件中找到，則直接傳回。如果p1物件中沒有找到，則直接去p1物件的[[prototype]]屬性指向的原型物件中查找，如果查找到則回傳。 (如果原型中也沒有找到，則繼續向上找原型的原型—原型鏈。 後面再說)。
如果透過p1物件新增了一個屬性name，則p1物件來說就屏蔽了原型中的屬性name。換句話說：在p1中就沒有辦法存取原型的屬性name了。
透過p1物件只能讀取原型中的屬性name的值，而不能修改原型中的屬性name的值。 p1.name = “李四”; 並不是修改了原型中的值，而是在p1物件中給添加了一個屬性name。
看下面的程式碼：
<body>
<script type="text/javascript">
function Person () {
}
// 可以使用Person.prototype 直接访问到原型对象
//给Person函数的原型对象中添加一个属性 name并且值是 "张三"
Person.prototype.name = "张三";
Person.prototype.age = 20;
var p1 = new Person();
/*
访问p1对象的属性name，虽然在p1对象中我们并没有明确的添加属性name，但是
p1的 [[prototype]] 属性指向的原型中有name属性，所以这个地方可以访问到属性name
就值。
注意：这个时候不能通过p1对象删除name属性，因为只能删除在p1中删除的对象。
*/
alert(p1.name); // 张三
var p2 = new Person();
alert(p2.name); // 张三 都是从原型中找到的，所以一样。
alert(p1.name === p2.name); // true
// 由于不能修改原型中的值，则这种方法就直接在p1中添加了一个新的属性name，然后在p1中无法再访问到
//原型中的属性。
p1.name = "李四";
alert("p1：" + p1.name);
// 由于p2中没有name属性，则对p2来说仍然是访问的原型中的属性。
alert("p2:" + p2.name); // 张三
</script>
</body>二、與原型有關的幾個屬性和方法
2.1 prototype屬性
prototype 存在於建構函式中(其實任意函式中都有，只是不是建構函式的時候prototype我們不關注而已) ，他指向了這個建構函式的原型物件。
參考前面的示意圖。
2.2 constructor屬性
constructor屬性存在於原型物件中，他指向了建構子
看下面的程式碼：
<script type="text/javascript">
function Person () {
}
alert(Person.prototype.constructor === Person); // true
var p1 = new Person();
//使用instanceof 操作符可以判断一个对象的类型。
//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
alert(p1 instanceof Person); // true
</script>我們根據需要，可以Person.prototype 屬性指定新的對象，來作為Person的原型對象。
但是這個時候有個問題，新的物件的constructor屬性則不再指向Person建構函式了。
看下面的程式碼：
<script type="text/javascript">
function Person () {
}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
Person.prototype = {
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.name); // 志玲
alert(p1 instanceof Person); // true
alert(Person.prototype.constructor === Person); //false
//如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
/*
Person.prototype = {
constructor : Person //让constructor重新指向Person函数
}
*/
</script>2.3 __proto__ 屬性(注意：左右各是2個底線)
用建構方法創建一個新的物件之後，這個物件中預設會有一個不可存取的屬性[[prototype]] , 這個屬性就指向了建構方法的原型物件。
但是在個別瀏覽器中，也提供了對這個屬性[[prototype]]的存取(chrome瀏覽器和火狐瀏覽器。ie瀏覽器不支援)。訪問方式：p1.__proto__
但是開發者盡量不要用這種方式去訪問，因為操作不慎會改變這個物件的繼承原型鏈。
<script type="text/javascript">
function Person () {
}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
Person.prototype = {
constructor : Person,
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.__proto__ === Person.prototype); //true
</script>2.4 hasOwnProperty() 方法
#大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。
那么如何判断这个对象的来源呢？
hasOwnProperty方法，可以判断一个属性是否来自对象本身。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//sex属性是直接在p1属性中添加，所以是true
alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
// name属性是在原型中添加的，所以是false
alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
// age 属性不存在，所以也是false
alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));
</script>所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。
也即是说，在原型中的属性和不存在的属性都会返回fasle。
如何判断一个属性是否存在于原型中呢？
2.5 in 操作符
in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
alert("sex" in p1); // 对象本身添加的，所以true
alert("name" in p1); //原型中存在，所以true
alert("age" in p1); //对象和原型中都不存在，所以false
</script>回到前面的问题，如果判断一个属性是否存在于原型中：
如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//定义一个函数去判断原型所在的位置
function propertyLocation(obj, prop){
if(!(prop in obj)){
alert(prop + "属性不存在");
}else if(obj.hasOwnProperty(prop)){
alert(prop + "属性存在于对象中");
}else {
alert(prop + "对象存在于原型中");
}
}
propertyLocation(p1, "age");
propertyLocation(p1, "name");
propertyLocation(p1, "sex");
</script三、组合原型模型和构造函数模型创建对象
3.1 原型模型创建对象的缺陷
原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。
但是在实际使用中，每个对象的属性一般是不同的。张三的姓名是张三，李四的姓名是李四。
==但是，这个共享特性对 方法(属性值是函数的属性)又是非常合适的。==所有的对象共享方法是最佳状态。这种特性在c#和Java中是天生存在的。
3.2 构造函数模型创建对象的缺陷
在构造函数中添加的属性和方法，每个对象都有自己独有的一份，大家不会共享。这个特性对属性比较合适，但是对方法又不太合适。因为对所有对象来说，他们的方法应该是一份就够了，没有必要每人一份，造成内存的浪费和性能的低下。
<script type="text/javascript">
function Person() {
this.name = "李四";
this.age = 20;
this.eat = function() {
alert("吃完东西");
}
}
var p1 = new Person();
var p2 = new Person();
//每个对象都会有不同的方法
alert(p1.eat === p2.eat); //fasle
</script>可以使用下面的方法解决：
<script type="text/javascript">
function Person() {
this.name = "李四";
this.age = 20;
this.eat = eat;
}
function eat() {
alert("吃完东西");
}
var p1 = new Person();
var p2 = new Person();
//因为eat属性都是赋值的同一个函数，所以是true
alert(p1.eat === p2.eat); //true
</script>但是上面的这种解决方法具有致命的缺陷：封装性太差。使用面向对象，目的之一就是封装代码，这个时候为了性能又要把代码抽出对象之外，这是反人类的设计。
3.3 使用组合模式解决上述两种缺陷
原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点就有了组合模式。
<script type="text/javascript">
//在构造方法内部封装属性
function Person(name, age) {
this.name = name;
this.age = age;
}
//在原型对象内封装方法
Person.prototype.eat = function (food) {
alert(this.name + "爱吃" + food);
}
Person.prototype.play = function (playName) {
alert(this.name + "爱玩" + playName);
}
var p1 = new Person("李四", 20);
var p2 = new Person("张三", 30);
p1.eat("苹果");
p2.eat("香蕉");
p1.play("志玲");
p2.play("凤姐");
</script>四、动态原型模式创建对象
前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。
动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。
看下面的代码：
<script type="text/javascript">
//构造方法内部封装属性
function Person(name, age) {
//每个对象都添加自己的属性
this.name = name;
this.age = age;
/*
判断this.eat这个属性是不是function，如果不是function则证明是第一次创建对象，
则把这个funcion添加到原型中。
如果是function，则代表原型中已经有了这个方法，则不需要再添加。
perfect！完美解决了性能和代码的封装问题。
*/
if(typeof this.eat !== "function"){
Person.prototype.eat = function () {
alert(this.name + " 在吃");
}
}
}
var p1 = new Person("志玲", 40);
p1.eat();
</script>推荐教程：《JS教程》
以上是JavaScript原型怎麼理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！