关于JS中的原型和原型链

目录

• 关于js
• 对象和原型
• 原型链
• 基于原型链的继承

参考资料
ECMAScript 6 入门
JavaScript原型中的哲学思想
MDNJavaScript 参考文档

介绍

关于js

完整的 JavaScript 主要是由ECMAScript、文档对象模型、浏览器对象模型三个部分组成。

• ECMAScript其实就是 js 的标准规范，或者说 js 是 ECMAScript 的扩展。
  • ECMA全称是欧洲计算机制造商协会，是一个国际标准化组织，主要制定了浏览器脚本语言 的标准（针对js），并将其成命名为 ECMAScript。
• 文档对象模型（DOM）：对 HTML 页面元素的属性、样式、事件等操作。例如：
  • document.getElementByXXX()
  • document.getElementByXXX(id).style.property
  • document.getElementByXXX(id).attribute
  • 当提交表单时运行脚本：onsubmit
• 浏览器对象对象模型（BOM）：针对浏览器相关的属性和方法：
  • 打开新窗口 window.open()
  • 所使用的 web 协议（http:// 或 https://）location.protocol
  • 浏览器平台 navigator.platform

对象和原型

JavaScript 是一门面向对象的语言。

殊不知，JavaScript的世界中的对象，追根溯源来自于一个 null。

在 ECMAScript 5 中，创建对象，一般有三种方法：

1. 对象直接量：var point = {x:0 , y:0} ;
2. new 和构造函数：var a = new Array() ;
3. Object.create()：var o1 = Object.create({x:1 , y:2})

我们来了解一个与对象息息相关的一个概念，原型。

绝大部分 JavaScript 对象（null 除外）都和另一个对象相关联，即原型，指向该原型对象的内部指针则是proto。每一个对象都从原型继承属性。

• 通过对象直接量创建的对象都有同一个原型对象，可以通过 __proto__ 获取原型对象。
• 通过new 和构造函数创建的对象的原型就是构造函数的 prototype 属性的值，简单地说，通过 new Array()创建的对象的原型就是 Array.prototype。而 Array.prototype则是继承自 Object.prototype。
• 通过Object.create()方法来创建对象，传入的参数为原型对象。

没有原型的对象为数不多，Object.prototype 就是其中之一，它不继承任何属性，所有的内置构造函数都具有一个继承自 Object.prototype 的原型。

去年6月，ECMAScript6发布，ECMAScript6 引入了一套新的关键字class可以实现类。

现在我们来基于原型编写一个简单的类：

我们先了解 new 的作用:

1. new 的作用就是创建实例对象，然后调用构造方法。

2. 放在 new 后面的方法会被默认当做构造函数。

3. 然后创建一个新的实例对象，该对象则从函数的原型继承属性和方法。

4. 上下文（this）会指向这个新实例对象。

   <script type="text/javascript">
        function  Human(name) {
           this.name = name ;
       }
       Human.prototype = {
           put : function(){
               console.log("my name is " + this.name) ;
           }
       }
   </script>
   

原型链

想要了解继承，我们得先知道原型链这个概念，顾名思义，原型链就是由原型对象组成的构成的一条链。

假设要查询对象 o 的属性 x，如果 o 不存在 x，那么将会在 o 的原型对象 o1 中查询属性 x，如果 o1 也没有 x，则会在 o1 的原型对象 o2 查找，直到找到 x 或者找到一个原型是 null 的对象为止。可以看到，对象的原型属性就构成了一条原型链。通过这条链，我们就能实现继承。

    <script type="text/javascript">
        var a = Object.create({x:1 , y:2}) ;
        var b = Object.create(a) ;
        var c = Object.create(b) ;
        console.log(c.__proto__) ;
    </script>

打印输出为：

输出原型链

基于原型链的继承

现在我们可以来简单地实现基于原型链的继承。

• 实现继承属性：

  <script type="text/javascript">
          var a = {
              x:10,
              y:20
          } ;
          var b = Object.create(a) ;
          b.y = 30 ;
          b.z = 40 ;
          var c = Object.create(b) ;
  
          console.log(c.x) ; // 10
          console.log(c.y) ; // 30
          console.log(c.z) ; // 40
  
      </script>
  

• 实现继承方法：

  <script type="text/javascript">
     a = 1 ;
      var o = {
          a : 2 ,
          m : function(){
              return this.a + 1 ;
          }
      };
  

// console.log(o.m()) ;
// console.log(this.a) ;

    var p = Object.create(o) ;
    p.a = 20 ;
    console.log(p.m()) ;
</script>
```