浅谈javascript的原型及原型链
ghostboy1129
8年前
<p>原型与原型链是javascript里面最最核心的内容,如果不能理解它们之间的存在关系的话,那么我们是不能理解这门语言的。</p> <p>在JS中,主要有两种创建对象的方法, 分别是对象字面量以及调用构造函数</p> <pre> //对象字面量 var obj1 = {} //调用构造函数 var obj2 = new Object()</pre> <p>其实上述两种创建对象的方法,本质上是一样的,都是JS引擎调用对象的构造函数来新建出一个对象。构造函数本身也是一个普通的JS函数</p> <p>下面我们来看一个例子</p> <pre> //创建构造函数 function Person(name){ this.name = name } //每个构造函数JS引擎都会自动添加一个prototype属性,我们称之为原型,这是一个对象 //每个由构造函数创建的对象都会共享prototype上面的属性与方法 console.log(typeof Person.prototype) // 'object' //我们为Person.prototype添加sayName方法 Person.prototype.sayName = function(){ console.log(this.name) } //创建实例 var person1 = new Person('Messi') var person2 = new Person('Suarez') person1.sayName() // 'Messi' person2.sayName() // 'Suarez' person1.sayName === person2.sayName //true</pre> <p>我们借助上面的例子来理解构造函数-原型-实例,三者之间的关系,主要有几个基本概念</p> <ul> <li> <p>构造函数默认会有一个 protoype 属性指向它的原型</p> </li> <li> <p>构造函数的原型会有一个 consctructor 的属性指向构造函数本身, 即</p> <pre> Person.prototype.constructor === Person</pre> </li> <li> <p>每一个 new 出来的实例都有一个隐式的 __proto__ 属性,指向它们的构造函数的原型,即</p> <pre> person1.__proto__ === Person.constructor person1.__proto__.constructor === Person</pre> </li> </ul> <p>了解了这些基本概念之后,我们再来看看javascript的一些原生构造函数的关系网,看下列的图</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/574960c0efeb550feb7e4f8cab6d53d8.png"></p> <p>引自 <a href="/misc/goto?guid=4959737366135089748" rel="nofollow,noindex">stackoverflow</a></p> <p>按照我们上面的理解, Oject本身是一个构造函数,它也是一个对象,那么</p> <pre> Object.__proto__ === Function.prototype</pre> <p>为了方便我们记住上图,还有几个需要我们知道的特殊概念:</p> <ul> <li> <p>Function 的原型属性与 Function 的原型指向同一个对象. 即</p> <pre> Function.__proto__ == Function.prototype</pre> </li> <li> <p>Object.prototype.__proto__ === null</p> </li> <li> <p>typeof Function.prototype === 'function'</p> </li> </ul> <p> </p> <p>来自:https://segmentfault.com/a/1190000008350004</p> <p> </p>