JS继承

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

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


1.原型继承:<SonClass.prototype = new FatherClass(param1, param2,..))>
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继承)(<A.call(this[,param1, param2,...])>
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继承 <arguments.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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容

  • 原文链接 js的继承有6种方式,大致总结一下它们各自的优缺点,以及它们之间的关系。 1.原型链 js的继承机制不同...
    空_城__阅读 790评论 0 11
  • 问题1: apply、call 、bind有什么作用,什么区别 apply/call/bind 问题2: 以下代码...
    DCbryant阅读 288评论 0 0
  • 1:原型继承 为了让子类继承父类的属性(也包括方法),首先需要定义一个构造函数。然后,将父类的新实例赋值给构造函数...
    codeSirCao阅读 236评论 0 0
  • 能让老人觉得生活无压力,能让孩子觉得成长很幸福,能让爱人觉得很安全,能让事业很顺利,能让朋友觉得很靠谱,能让合作伙...
    已经没有当年潇洒阅读 232评论 0 0
  • 人到中年天过午,此时,上有老,下有小,正是艰难的奋斗爬坡阶段。既想让父母衣食无忧,安度晚年,又想让儿女有求必应,幸...
    智赢人生阅读 218评论 0 1