关于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）会指向这个新实例对象。

原型链

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

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

打印输出为：

输出原型链

基于原型链的继承

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

• 实现继承属性：

• 实现继承方法：

  
  ```