头图

实例

var animal = function() {};
var dog = function() {};

animal.prototype.price = 20;
animal.price = 1000;

dog.prototype = animal;

var cat = new animal();
var tidy = new dog();
// 下面两行分别输出什么?
console.log(cat.price);
console.log(tidy.price);

要理解原型和原型链首先要知道几个概念:

  • 在js里,继承机制是原型继承。继承的起点是 对象的原型(Object prototype)。
  • 一切皆为对象,只要是对象,就会有 proto 属性,该属性存储了指向其构造的指针。
  • Object prototype也是对象,其 proto 指向null。
  • 对象分为两种:函数对象和普通对象,只有函数对象拥有『原型』对象(prototype)。
  • prototype的本质是普通对象。
  • Function prototype比较特殊,是没有prototype的函数对象。
  • new操作得到的对象是普通对象。
  • 当调取一个对象的属性时,会先在本身查找,若无,就根据 proto 找到构造原型,若无,继续往上找。最后会到达顶层Object prototype,它的 proto 指向null,均无结果则返回undefined,结束。
  • 由 proto 串起的路径就是『原型链』。
    看图

cat调用price

  • 查看本身,没有price,根据 proto 找到 animal prototype对象。
  • 在animal prototype对象中找到了price,所以 cat.price 结果为20。
  • 如果无 animal.prototype=20,则会根据animal prototype对象的 proto 找到Object prototype,Object prototype中的 proto 指向null,若仍没有找到price,结果则为undefined。

tidy调用price

  • 查看本身,没有price,根据 proto 找到dog prototype。
  • dog prototype = animal,这里可以这样理解: prototype本质也是一个对象,因此可以重新赋一个对象,无论是函数对象还是普通对象。事实上,每个 prototype 会有一个预定义的constructor属性用来引用它的函数对象。
  • 在animal中找到了price, 所以 tidy.price 结果为1000。
  • 如果无 animal.price = 1000,则会根据animal的 proto 找到下一个对象,最终都没有找到 price,结果就为undefined。

进阶学习:

创建一个对象的方式

{}、new Object()
构造函数
Object.create()
此方法将新对象的proto更改并指向create的入参对象。
instance of VS constructor
instance of 原理:检查左边对象与右边对象是否在同一条原型链上。
constructor原理:取对象的proto属性指向的prototype对象上的constructor字段。
cat instanceof animal === true
cat.__proto__ === animal.prototype

animal.prototype instanceof Object === true
animal.prototype.__proto__ === Object.prototype

cat instanceof Object === true
// but,
cat.constructor === animal // true
cat.constructor === Object // false

new运算符的原理

  • 创建一个空对象,它的proto等于构造函数的原型对象(可以用Object.create()完成)
  • 构造函数以第1步创建的对象做为上下文,是否会返回一个对象
  • 若第2步返回了对象,则使用该对象作为新实例,否则用第1步创建的对象作为新实例
var myNew = function (func) {
var o = Object.create(func.prototype)
var i = func.call(o)
return typeof i === 'object' ? i : o
}

继承
类的声明:

function
class
生成实例:new

继承的几种方式:

  • 借助构造函数,父类的作用域指向子类
  • Parent.call(this) // this是Child类的上下文
  • 缺点:不能继承原型链属性
  • 借助原型链

  • Child.prototype = new Parent()
  • 缺点:子类所有实例共享原型对象;子类实例的constructor为Parent

    组合方式

  • Parent.call(this) // this是Child类的上下文
  • Child.prototype = Object.create(Parent.prototype)
  • Child.prototype.constructor = Child

HZM_无止境
71 声望3 粉丝