美文网首页
原型链与继承方式

原型链与继承方式

作者: 小本YuDL | 来源:发表于2020-07-09 17:29 被阅读0次

1.原型继承,简单,但是原型对象的所有属性被所有实例共享,例如子类对color进行修改,其他的也会变。

function Parent(name, age){
  this.name = name;
  this.age = 24;
  this.getName = function (){
    return this.name;
  };
  this.color = ['ff','22'];
}
Parent.prototype.getAge = function (){
  return this.age;
}

function Son(name){
  this.name = name;
}
Son.prototype = new Parent();
let son1 = new Son('one');
let son2 = new Son('two');
son1.color.push('333');
console.log(son2.name);
console.log(son1.color);//["ff", "22", "333"]
console.log(son2.color);//["ff", "22", "333"]

2.构造函数继承,只会继承实例属性,不会继承原型属性

function Parent(name,age){
  this.name = name;
  this.age = age;
  this.getAge = function(){
    return this.age;
  }
}
Parent.prototype.getName = function(){
  return this.name;
}
Parent.prototype.sex = '男';

function Son(name,sex){
  this.name = name;
  this.sex = sex;
  Parent.call(this, name ,24);
}
let son = new Son('小仙女','女');
console.log(son.name);
console.log(son.sex);
console.log(son.getAge());
console.log(son.getName());  // undefined
  1. 组合继承,会继承原型和实例的属性,但是会两次调用Parent,生成两份父类实例
function Parent(name,age){
  this.name = name;
  this.age = age;
  this.getAge = function(){
    return this.age;
  }
}
Parent.prototype.getName = function(){
  return this.name;
}
Parent.prototype.sex = '男';

function Son(name,sex,age){
  this.name = name;
  this.sex = sex;
  Parent.call(this, name ,age);
}

Son.prototype = new Parent(); 

let son = new Son('小仙女','女',22); 
console.log(son.name); 
console.log(son.sex);
console.log(son.getAge());
console.log(son.getName());
  1. 寄生组合继承,比较完美
 function Parent(name,age){
  this.name = name;
  this.age = age;
  this.getAge = function(){
    return this.age;
  }
}
Parent.prototype.getName = function(){
  return this.name;
}
Parent.prototype.sex = '男';

function Son(name,sex,age){
  this.name = name;
  this.sex = sex;
  Parent.call(this, name ,age);
}
//复制一份父原型,Son的prototype指向复制的父,constructor指向Son构造函数
Son.prototype = Object.create(Parent.prototype);
Son.prototype.constructor = Son;

let son = new Son('小仙女','女',22); 
console.log(son.name); 
console.log(son.sex);
console.log(son.getAge());
console.log(son.getName());

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • Javascript继承的原理

    JavaScript的继承是通过原型链继承,与传统面向对象的继承方式不同。 prototype与原型 我们从头开始...

  • JavaScript继承方式详解

    JavaScript实现继承的方式主要有两种: 原型链继承和借助构造函数继承 一、原型链继承 原型链继承的主要思想...

  • JavaScript的六种继承方式

    JavaScript的几种继承方式 原型链继承 借助构造函数继承(经典继承) 组合继承:原型链 + 借用构造函数(...

  • js实现继承的几种方式

    js实现继承有几种方式,这里我们主要探讨 原型链继承 构造继承 组合继承(原型链和构造继承组合到一块,使用原型链实...

  • js中的继承

    继承 对象冒充的方式实现继承 弊端:只能继承构造函数里面的属性/方法。原型链上的无法继承 原型链的方式实现继承 弊...

  • js常见的继承方式

    1.原型链继承 基于原型链查找的特点,我们将父类的实例作为子类的原型,这种继承方式便是原型链继承。 Child.p...

  • JavaScript实现继承

    实现继承分为多种方式,但主要还是通过原型链来实现的。 原型链继承 原型链继承就是使子类的原型指向父类构造出来的实例...

网友评论

      本文标题:原型链与继承方式

      本文链接:https://www.haomeiwen.com/subject/ntvscktx.html