浅谈javascript的原型及原型链

ghostboy1129 7年前
   <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>