[JavaStript学习记录] 对象的继承

---- 本系列仅为个人学习总结,基于阮一峰大佬的《>>JavaScript 教程<<》---

目录

一.原型对象

prototypep属性

 Constructor属性

二.instanceof 运算符 

注意:instanceof只能用于对象，不适用原始类型的值

三.构造函数的继承

第一步:

第二步:

另外一种写法(不推荐)

例如(让Rectangle构造函数继承Shape)

四.多重继承

★五.模块

loading......

---

一.原型对象

原型对象的作用，就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因，而实例对象可以视作从原型对象衍生出来的子对象。

prototypep属性

JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。对于普通函数来说，该属性基本无用。但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';

var cat1 = new Animal('玛卡巴卡');
var cat2 = new Animal('唔西迪西');

cat1.color //white
cat2.color //white

cat1.color = 'blue'

cat1.color //blue
cat2.color //white

读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overriding）。

注意，一级级向上，在整个原型链上寻找某个属性，对性能是有影响的。所寻找的属性在越上层的原型对象，对性能的影响越大。如果寻找某个不存在的属性，将会遍历整个原型链。

var MyArray = function () {};

MyArray.prototype = new Array();

var mine = new MyArray();
mine.push(1, 2, 3);
mine.length // 3
mine instanceof Array // true

 Constructor属性

表示原型对象与构造函数之间的关联关系

• 可以得知某个实例对象，到底是哪一个构造函数产生的

function F() {};
var f = new F();

f.constructor === F // true
f.constructor === G // false

• 可以从一个实例对象新建另一个实例(间接调用构造函数)

function Constr() {}
var x = new Constr();

var y = new x.constructor();
y instanceof Constr // true

var m = new Constr();
m.constructor() == y.constructor()  //true

 修改原型对象时，一般要同时修改constructor属性的指向,防止引用的时候出错

//未修改constructor属性

function Person(name) {
  this.name = name;
}

Person.prototype.constructor === Person // true

Person.prototype = {
  method: function () {}
};

Person.prototype.constructor === Person // false
Person.prototype.constructor === Object // true

// 坏的写法
C.prototype = {
  method1: function (...) { ... },
  // ...
};

// 好的写法 ,在原型对象上添加方法
C.prototype = {
  constructor: C,
  method1: function (...) { ... },
  // ...
};

// 更好的写法
C.prototype.method1 = function (...) { ... };

二.instanceof 运算符 

返回一个布尔值，表示对象是否为某个构造函数的实例

var v = new Vehicle();
v instanceof Vehicle // true
Vehicle.prototype.isPrototypeOf(v) //true

由于任意对象（除了null）都是Object的实例，所以instanceof运算符可以判断一个值是否为非null的对象

var obj = { foo: 123 };
obj instanceof Object // true
null instanceof Object // false

instanceof的原理是检查右边构造函数的prototype属性，是否在左边对象的原型链上 

var obj = Object.create(null);
typeof obj // "object"
obj instanceof Object // false

上面代码中，Object.create(null)返回一个新对象obj，它的原型是null（Object.create()的详细介绍见后文）。右边的构造函数Object的prototype属性，不在左边的原型链上，因此instanceof就认为obj不是Object的实例。这是唯一的instanceof运算符判断会失真的情况（一个对象的原型是null）。

注意:instanceof只能用于对象，不适用原始类型的值

var s = 'hello';
s instanceof String // false

上面代码中，字符串不是String对象的实例（因为字符串不是对象），所以返回false。

此外，对于undefined和null，instanceof运算符总是返回false。

undefined instanceof Object // false
null instanceof Object // false

还可以巧妙地解决，调用构造函数时，忘了加new命令的问题。

function Animal (age, color) {
  if (this instanceof Animal) {
    this._age = age;
    this._color = bar;
  } else {
    return new Animal (age, color);
  }
}

三.构造函数的继承

第一步:

在子类的构造函数中，调用父类的构造函数

function Sub(value) {
  Super.call(this); //★
  this.prop = value;
}

Sub 是子类的构造函数，this是子类的实例。
在实例上调用父类的构造函数Super，使子类实例具有父类实例的属性

第二步:

让子类的原型指向父类的原型，这样子类就可以继承父类原型

Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;  //修改constructor属性的指向,上文中有解释
Sub.prototype.method = '...';

 ★★★Sub.prototype是子类的原型，要将它赋值为Object.create(Super.prototype)，而不是直接等于Super.prototype。

否则后面两行对Sub.prototype的操作，会连父类的原型Super.prototype一起修改掉。

另外一种写法(不推荐)

(#^.^#)  老父亲也是需要隐私的哦!

 

Sub.prototype = new Super();

也有继承的效果，但是子类会具有父类实例的方法。有时，这可能不是我们需要的，所以不推荐这种写法

例如(让Rectangle构造函数继承Shape)

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// 第一步，子类继承父类的实例
function Rectangle() {
  Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
  this.base = Shape;
  this.base();
}

// 第二步，子类继承父类的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;


var rect = new Rectangle();

rect instanceof Rectangle  // true
rect instanceof Shape  // true

 在这个例子中,子类是整体继承父类。有时只需要单个方法的继承，这时可以采用下面的写法。

ClassB.prototype.print = function() {
  ClassA.prototype.print.call(this);
  // some code
}

子类B的print方法先调用父类A的print方法，
再部署自己的代码。这就等于继承了父类A的print方法

四.多重继承

 avaScript 不提供多重继承(即一个对象同时继承多个对象)功能。但是，可以通过变通方法，实现这个功能

下面的子类AB同时继承了父类A和B。这种模式又称为 Mixin（混入）

function A(){
    this.h='hello';
}
function B(){
    this.w='world';
}
function AB(){
    A.call(this);
    B.call(this);
}

// 继承 A
AB.prototype = Object.create(A.prototype);
// 继承链中加入 B
Object.assign(AB.prototype,B.pprototype);
// 指定构造函数
AB.prototype.constructor = AB;


var one = new AB();
one.h    // 'hello'
one.w    // 'world'

★五.模块

loading......