JS继承

大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现,下文给大家技术js实现继承的六种方式

方法总结:
原型链继承 、 构造函数继承(call继承)、冒充对象继承、实例继承、
组合继承、 寄生组合继承 、 proto继承法


1.原型继承:
var A = function (x, y) {
   var num = 10;  //函数作为普通函数执行,变量
   this.x = x;  //实例对象增加的私有属性
   this.y = y;
   this.getX = function() {    //实例私有的方法
      console.log(this.x); 
 };
};
A.prototype.getX = function () {   //原型上共有的方法
   console.log(this.x);  
};
 A.prototype.write = function() {
    console.log('write-js');
 };
A.tools = {       //函数最为对象使用的,对象.属性 = 属性名
   getName: function() {
   },
  x: 10
}

var B = function (x, y) {
   this.x = x;
   this.y = y;
};
 B.prototype = new A(10, 20);
 B.prototype.constructor = B;   //***因为你把天生的prototype对象替换了,所以constructr你必须手动指向他本身,否则就指向了A的constructor
 B.prototype.getY = function () {
     console.log(this.y);
};



var b1 = new B(1, 2);
var b2 = new B('JS','CSS');
console.log(b1);
console.log(b1 instanceof B); //true 是子类的实例
console.log(b1 instanceof A); //true  是父类的实例
console.log(b1.hasOwnProperty('getX'));  //false 不是私有的属性(原型上)
console.log(b1.hasOwnProperty('getY'));  //false   不是私有的属性(原型上)
console.log(B.prototype.constructor === B);   //true
console.log(b1.__proto__.__proto__.getX === A.prototype.getX); //true
// 先找到自己类的原型,在通过自己类原型的.__proto__指向父类的原型, 因为 B.prototype = new A() ,B的原型就是A的一个实例么
//b1: {x: 1, y: 2}
//   __proto__  B.prototype  {x: 10, y: 20, getY: function(){} }
//   __proto__  A.prototype {getX: function(){} }


b1.getX = function () {     //这也是在b1的内存空间增加的私有方法。和b2无关
console.log('getX-prtive');
};

b1.__proto__.getX = function () {   //这个是在b1所属类的原型上增加的方法,是共享的和,所以和b2有关系
console.log('getX-common')
};

b2.getX(); // getX-common
console.log(b1.getX === b2.getX);  //b1的私有方法getX和b2共有属性方法比较 , <原型链机制查找>
console.log(b1.__proto__.getX === b2.getX); //b1和b2的getX都是共有的方法

b1.name = 'clh';  //给自己开辟的空间增加的私有属性 (***)
console.log(b2.name);

b1.__proto__.printX = function () {
console.log(this.x);
};

b2.printX();   //JS    上面那条代码在b1的类的原型上增加了一个printX方法,这里b2肯定会访问到,b2执行这个函数,this肯定是b2,所以 b2.x = JS

b1.__proto__.__proto__.init = function () {  //这是在给父类A的原型上增加一个init方法 
console.log('init-function');
};

console.log(b1.init === b2.init);  //true
console.log(b1.init === A.prototype.init);  //true


b1.__proto__.__proto__.change= function() {  //在父类A的原型上增加一个方法
    alert('chagne-getX');
};

b2.change(); //弹出 'change-getX' 调用父类A的原型的方法

b1.__proto__.__proto__.write = function() {   //*** 子类从写父类原型上的方法
    console.log('write-css');
};

b2.write();  // 'write-css'   原型链查找机制,找到父类A的原型上的write方法



 特点:
 核心:  拿父类实例来充当子类原型对象, (把父类的私有属性克隆一份,放到子类的原型上,父类的共有属性通过子类的原型上的__ptoto__查找到)
1. 非常纯粹的继承关系,实例是子类的实例,也是父类的实例
2. 父类新增原型方法/原型属性,子类都能访问到
3.简单,易于实现
缺点:

要想为子类新增属性和方法,必须要在new A()这样的语句之后执行,不能放到构造器中
无法实现多继承
来自原型对象的引用属性是所有实例共享的(详细请看附录代码: 示例1)
创建子类实例时,无法向父类构造函数传参
2.构造函数继承(call继承)(
var A1 = function (name, age) {
   var num = 10;
   this.name = name;
   this.age = age;
};
A1.prototype.getName = function () {
   console.log('A-getName');
};

var A2 = function () {
   this.x = 10;
};
 A2.prototype.getX = function(() {
    console.log(this.x);
 };

var A3 = function () {
   this.y = 20;
};
 A3.prototype.getY = function(() {
    console.log(this.y);
 };

  var B1 = function (name, age) {
  A1.call(this, name, age);   //this是,B1类的一个实例对象, 把父类的私有属性性拷贝一份,放到这个实例的私有属性上
  A1.apply(this,arguments); //apply****继承
  A2.call(this);  //继承类A2的私有方法,放到B1实例对象的私有属性中
  A3.call(this);   //继承类A3的私有方法 ,放到B1实例对象的私有属性中
};

B1.prototype.getName = function () {
  console.log(this.name);
};
B1.prototype.getAge = function () {
   console.log(this.age);
};

var b1 = new B1('clh', 25);
console.log(b1);

console.log(b1 instanceof B1); //true  是子类的实例
console.log(b1 instanceof A1); // false 不是父类的实例
console.log(b1.getName === b1.__proto__.getName); //true 
console.log(b1.getName === b1.__proto__.__proto__.getName);    // false 后面那个是B1类原型上的.__prtot__, 那么原型是对象,所以是Object的实例,所以指向Object原型的getName,没有返回undefiend

 特点:

1. 解决了1中,子类实例共享父类引用属性的问题
2. 创建子类实例时,可以向父类传递参数
3. 可以实现多继承(call多个父类对象)
缺点:

1. 实例并不是父类的实例,只是子类的实例
2. 只能继承父类的实例属性和方法,不能继承原型属性/方法
3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能*/

3.冒充对象继承(拷贝继承)

var A2 = function (color, fontSize) {
    this.a = 10;
    this.b = 20;
    this.name = 'clh';
    this.getName = function () {
         console.log(this.getName);
    };
};

A2.prototype.printA = function () {
  console.log(('A2-prototype.printA'));
};

var A3 = function (x, y) {
  this.x = x
  this.y = y;
};
A3.prototype.getX = function () {
   console.log(this.x);
};


var B2 = function (cont) {
var objA = new A2('#ff0', '30px');   //自己创建一个对象,把父类的私有和共有属性/方法拿过来,进行遍历,放到子类的 私有属性中
var objB = new A3(1, 2);
for (var key in objA) {      //A2类
    this[key] = objA[key];   // this.prototype[key] = obj[key]  这是放到子类的共有属性中,把父类的私有和共有属性
}

for (var key in objB) {   //A3类
    this[key] = objB[key];
}


this.write = cont; //在增加自己传进来的属性
};

B2.prototype.write = function () {
  console.log('wait-JS');
};
B2.prototype.printA = function () {
   console.log('B2-prototype.printA');
};

var b2 = new B2('CSS+DIV');
console.log(b2);
console.log(b2 instanceof B2);   // true 是子类的实例
console.log(b2 instanceof  A2);   // false 不是父类的实例
console.log(b2.hasOwnProperty('name')); //true 是私有属性
console.log(b2.hasOwnProperty('printA')); //true 是私有属性

b2.printA(); //  'A2-prototype.printA'  私有属性的printA(),也就是继承A2原型上的printA方法
b2.__proto__.printA(); //  'B2-prototype.printA' 直接找到B2原型上的printA方法

特点:

 1. 支持多继承
缺点:

1.  效率较低,内存占用高(因为要拷贝父类的属性)
2. 无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)*/

4 实例继承

var A3 = function (name, color) {
   this.name = name;
   this.color = color;
   this.x = 1;
   this.y = [1,2,3];
   this.getY = function () {
     console.log('A-pritive-getY');
   }
};
A3.prototype.getY = function () {
   console.log('A-common-getY');
};

var B3 = function (name, color) {
  var obj = new A3(name ,color);
  obj.x = 'JS继承';
  return obj;
};

B3.prototype.getColor = function () {
  console.log('B-common-getColor');
};

var b3 = new B3('clh', 'red');
console.log(b3);
console.log(b3 instanceof B3);  //false  因为他不是B3的实例,所以访问不到B3原型上的属性和方法
console.log(b3 instanceof A3);  //true  是A3的实例
console.log(b3.getY === A3.prototype.getY); // false
console.log(b3.getY.__proto__.getY === A3.prototype.getY); //false
console.log(b3.getY === A3.prototype.getY); //false
console.log(b3.hasOwnProperty('getY')); //true



特点:

 不限制调用方式,不管是new 子类()还是子类(),返回的对象具有相同的效果
缺点:

实例是父类的实例,不是子类的实例
不支持多继承*/

5组合继承 < 原型链继承 + 构造函数继承(call继承)>

var Animate = function (name, color, age, food) {
   this.name = name;
   this.color = color;
   this. age = age;
   this.eat = function (food) {
       console.log(this.name + '喜欢吃' + food);
   };
  this.write = function() {    //私有方法 write
         console.log('wirte-js');
  };
};

Animate.prototype.write = function() {   //共有方法write
   console.log('write-css');
 }
Animate.prototype.sleep = function (sleep) {
    console.log(this.name + '喜欢在' + sleep + '睡觉');
};
Animate.prototype.running  = function (runMethod) {
   console.log(this.name + '跑的方法' + runMethod);
};


var Dog = function (name, color, age, food) {
   Animate.call(this, name, color, age, food);  //构造函数继承父类的私有属性和方法
};

Dog.prototype = new Animate(); //继承父类的私有属性和私有方法放到这个类的原型上
Dog.prototype.constructor = Dog;  //强制constructor指向自己,否则原型链会混乱了
Dog.prototype.play = function (plays) {
    console.log(this.name + '喜欢玩' + plays);
};
Dog.prototype.write = function() {
     console.log('write-html');
};

var dog1 = new Dog('小狗', 'red', 23, '骨头'); 
console.log(dog1);
console.log(dog1 instanceof Dog); //true  是子类的一个实例
console.log(dog1 instanceof  Animate);  //true 是父类的一个实例

console.log(dog1.sleep === Animate.prototype.sleep); //true 第一个找到自己原型上的sleep方法,也就是原型继承过来的父类的原型sleep, 第二个是父类原型上的sleep方法
console.log(dog1.__proto__.__proto__.sleep === Animate.prototype.sleep); //true    自己子类原型.__prtoto__指向父类的prototype  所以为true
dog1.sleep('爬在地上');
dog1.running('四条腿');

dog1.sleep = function() {   //修改自己类原型上的sleep方法
        alert('ok'); 
};

dog1.sleep(); // 'ok'

dog1.__proto__.__proto__.sleep = function() {   //修改父类原型上的sleep方法
       alert('chagne-sleep-method');
};
var  animate1 = new Animate();
animate1.sleep();   // 'chagne-sleep-method'
dog1.__proto__.__proto__.sleep(); //'chagne-sleep-method'

dog1.write ();  //  ’write-js' 私有属性的write方法
dog1.__proto__.write();   //’write-html'  共有属性子类原型上的write方法, 这里因为你首先进行了原型继承,子类原型上有一个write方法,你又给这原型对象增加了一个write方法,他肯定会把继承过来的write方法给覆盖了,所以输出结果为'write-html'
dog1.__proto__.__proto__.write();   // ’write-css‘  父类原型上的write方法

特点:

 1. 弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
 2. 既是子类的实例,也是父类的实例
 3. 不存在引用属性共享问题
 4. 可传参
 5. 函数可复用
 6. 可以实现多继承(call)

缺点:

 1.  调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

6.寄生组合继承( < 原型链继承 + 构造函数继承(call继承)) (利用空对象作为中介)

var AClass = function (name, age) {
   this.name = name;
   this.age =age;
   this.getAge = function () {
       console.log(this.age);
   };
   this.getName = function () {

    };
};

AClass.prototype.getName =function () {
    console.log(this.name);
};


var BClass = function (name, age) {
    AClass.call(this, name, age);
   this.height = '180cm';
};
 
 // 其实这样做的目的是原型只继承父类原型上的东西
function extend(Child, Parent) {
    var F = function(){}; //空对象
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;   //为子对象设一个uber属性,这个属性直接指向父对象的prototype属性, 这等于在子对象上打开一条通道,可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质
}
extend(BClass, AClass);
BClass.prototype.getHeight = function () {

};

var bclass1 = new BClass('clh' ,25);
var bclass2 = new BClass('wd' ,23);
console.log(bclass1);
console.log(bclass1 instanceof BClass);  //true 是子类的实例
console.log(bclass1 instanceof AClass);  //true  是父类的实例


console.log(bclass1.getHeight === bclass2.getHeight);  // true都是子类原型上的getHeight
console.log(bclass1.getName === AClass.prototype.getName); // false 第一个是自己类上原型上的getName,  第二个是父类原型上的getName ,肯定不一样
console.log(bclass1.__proto__.__proto__.getName === AClass.prototype.getName); //true  都是父类原型上的getName方法

 特点:
 1. 堪称完美
 缺点:

 1.  实现较为复杂

7.proto继承 proto = Array.prototype>

  function sum() {
      console.log(arguments instanceof  Array);   //false, 不是数组,不可以使用数组提供的方法
      arguments.__proto__ = Array.prototype;      //在中间加了一层,强制将__proto__指向了数组的原型
      console.log(arguments instanceof Array);  // true  在数组了,可以用数组的方法
      console.log(arguments.slice()); // [1,2,3,1] 克隆一份数组
   }

 sum(1,2,3,1);

你可能感兴趣的:(JS继承)