JS中原型链中的prototype与_proto_的我的理解与详细总结（**************************************************************）

一直认为原型链太过复杂，尤为看过某图后被绕晕了一整子，今天清理硬盘空间（渣电脑），偶然又看到这图，勾起了点回忆，因而索性复习一下原型链相关的内容，表达能力欠缺逻辑混乱别见怪（为了防止新人__（此处指我）__被在此绕晕，图片就放在末尾了。）

如下三点须要谨记

1.每一个对象都具备一个名为__proto__的属性；

2.每一个构造函数（构造函数标准为大写开头，如Function()，Object()等等JS中自带的构造函数，以及本身建立的）都具备一个名为prototype的方法（注意：既然是方法，那么就是一个对象（JS中函数一样是对象），因此prototype一样带有__proto__属性）；

3.每一个对象的__proto__属性指向自身构造函数的prototype；

思路扩展以下

 1             function Fun(){
 2             }
 3 //            我创造了一个函数Fn
 4 //            这个函数由Function生成（Function做为构造函数）
 5             var fn=new Fun()
 6 //            我建立了一个函数fn
 7 //            这个函数由Fn生成（Fn做为构造函数)
 8             
 9             
10             console.log(fn.__proto__===Fun.prototype)    //true
11 //            fn的__proto__指向其构造函数Fun的prototype
12             console.log(Fun.__proto__===Function.prototype)        //true
13 //            Fun的__proto__指向其构造函数Function的prototype
14             console.log(Function.__proto__===Function.prototype)    //true
15 //            Function的__proto__指向其构造函数Function的prototype
16 //            构造函数自身是一个函数，他是被自身构造的
17             console.log(Function.prototype.__proto__===Object.prototype)    //true
18 //            Function.prototype的__proto__指向其构造函数Object的prototype
19 //            Function.prototype是一个对象,一样是一个方法,方法是函数,因此它必须有本身的构造函数也就是Object
20             console.log(Fun.prototype.__proto__===Object.prototype)         //true
21 //             与上条相同
22 //             此处能够知道一点,全部构造函数的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身)
23             console.log(Object.__proto__===Function.prototype)        //true
24 //            Object做为一个构造函数(是一个函数对象!!函数对象!!),因此他的__proto__指向Function.prototype
25             console.log(Object.prototype.__proto__===null)        //true
26 //            Object.prototype做为一切的源头,他的__proto__是null
27 
28 //            下面是一个新的,额外的例子
29 
30             var obj={}
31 //            建立了一个obj
32             console.log(obj.__proto__===Object.prototype)        //true
33 //            obj做为一个直接以字面量建立的对象，因此obj__proto__直接指向了Object.prototype，而不须要通过Function了！！
34 
35 //            下面是根据原型链延伸的内容
36 //            还有一个上文并未提到的constructor,  constructor在原型链中,是做为对象prototypr的一个属性存在的,它指向构造函数（因为主要讲原型链，这个就没在乎、）；
37 
38             console.log(obj.__proto__.__proto__===null)        //true
39             console.log(obj.__proto__.constructor===Object)        //true
40             console.log(obj.__proto__.constructor.__proto__===Function.prototype)        //true
41             console.log(obj.__proto__.constructor.__proto__.__proto__===Object.prototype)    //true    
42             console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__===null)        //true
43             console.log(obj.__proto__.constructor.__proto__.__proto__.constructor.__proto__===Function.prototype)    //true
44             
45             
46 //            以上，有兴趣的能够一一验证　　F12搞起.
　　　　　　　　　

 

为了方便记忆能够得出以下结论（若有错误欢迎斧正.....）

prototype是构造函数独有的属性；

对象的__prototype__属性一般与其构造函数的prototype属性相互对应；

全部构造函数的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身)；

 

须要注意的指向是

Function的__proto__指向其构造函数Function的prototype；

Object做为一个构造函数(是一个函数对象!!函数对象!!),因此他的__proto__指向Function.prototype；

Function.prototype的__proto__指向其构造函数Object的prototype；

Object.prototype的__prototype__指向null（尽头）；

 

在文章结构顺便附送上俩个与原型链相关的方法....欢迎使用

1.

hasOwnProperty判断一个对象是否有名称的属性或对象，此方法没法检查该对象的原型链中是否具备该属性，该属性必须是对象自己的一个成员。 

若是该属性或者方法是该 对象自身定义的而不是器原型链中定义的 则返回true;不然返回false; 

格式以下： 

 

object.hasOwnProperty(proName); 　　
括号内必需要加引号，而且直接写入属性名

 

2.

 

isPrototypeOf是用来判断指定对象object1是否存在于另外一个对象object2的原型链中，是则返回true，不然返回false。 

格式以下： 

object1.isPrototypeOf(object2); 

object1是一个对象的实例； 

object2是另外一个将要检查其原型链的对象。 

原型链能够用来在同一个对象类型的不一样实例之间共享功能。 

若是 object2 的原型链中包含object1，那么 isPrototypeOf 方法返回 true。 

若是 object2 不是一个对象或者 object1 没有出如今 object2 中的原型链中，isPrototypeOf 方法将返回 false。 

 

 

 

 

 

 

 

 

 

 

某图在这里　　ps：本文是总结，加我的理解.....图是很久前留存在电脑的....忘了是在哪看到的...

 

 

 

 

 

JS对象、原型

字数664 阅读10 评论0 喜欢1

Q&A：

1. OOP 指什么？有哪些特性

• OOP，即Object Oriented Programming，面向对象编程，是计算机的一种编程架构，OOP的一条基本规则是，计算机程序由可以起到子程序做用的单个或对象组合而成。包含属性和方法的对象是类的实例，而JS中没有类的概念，而是直接使用对象实现编程任务。
• 特性：
  • 封装：可以将一个实体的信息、功能、响应都装在一个单独对象中的特性；使编程过程没必要拘泥于原理，而是重在实现；
  • 继承：在不改变源程序的基础上进行扩充，原功能得以保存，而且子程序能对其进行扩展，避免编写重复代码，提升工做效率；
  • 多态：容许将子类类型的指针赋值给父类类型的指针；原生JS是弱类型语言，没有多态概念。

2. 如何经过构造函数的方式建立一个拥有属性和方法的对象?

因为函数也是对象的一种，因此继承了对象原型，能够对其添加属性和方法，构造函数也是函数，因此用自定义函数的方式，并将首字母大写以明确是构造函数便可，能够用new操做符建立函数实例验证。

function Person(name) { this.name = name; this.sayName = function() { console.log(this.name); } }

构造函数

3. prototype 是什么？有什么特性

• prototype，即原型，每建立一个函数都会有一个prototype属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含能够由特定类型的全部实例共享的属性和方法。

• 特性：让全部对象实例共享原型对象所包含的属性和方法：

  function Person(name) { this.name = name; } Person.prototype.sayName = function() { console.log(this.name); } var p1 = new Person('zhao'), p2 = new Person('kevin'); p1.sayName(); p2.sayName();

  
  

  prototype

4. 画出以下代码的原型图

<script> function People(name) { this.name = name; this.sayName = function() { console.log('my name is:' + this.name); } } People.prototype.walk = function() { console.log(this.name + 'is walking'); } var p1 = new People('饥人谷'); var p2 = new People('前端'); </script>

原型图

5. 如下代码中的变量age有什么区别

function People() { var age = 1; this.age = 10; } People.age = 20; People.prototype.age = 30;

• var age = 1：age为局部变量；
• this.age = 10：函数调用时，age为this指向对象的属性；
• People.age = 20：构造函数的age变为20；
• People.prototype.age = 30：原型添加age属性；

Coding：

1. 建立一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus

function Car(name, color, status) { this.name = name; this.color = color; this.status = status; } Car.prototype = { constructor : Car, run: function() { this.status = 'run'; }, stop: function() { this.status = 'stop'; }, getStatus: function() { console.log(this.status); } } var car1 = new Car('BMW', 'red', 'stop');

coding1

---

本文归本人和饥人谷全部，如需转载请注明出处