标签：function child1 console name 继承 几种 log JS 构造函数

js继承的目的是重复利用另一个对象的属性和方法

原型链继承

让一个构造函数A的原型是另一个构造函数B的实例对象;那么A构造函数new出来的实例就拥有B的属性和方法

优点:父类方法可以复用

缺点:父类中的属性会被所有子类共享,当其中一个子类修改其值后,所有子类都会共享修改后的值;子类实例不能给父类构造函数传参

function Parent() {
   this.isShow = true
   this.info = {
       name: "mjy",
       age: 18,
   };
}
 
Parent.prototype.getInfo = function() {
   console.log(this.info);
   console.log(this.isShow);
}
 
function Child() {};
Child.prototype = new Parent();
 
let Child1 = new Child();
Child1.info.gender = "男";
Child1.getInfo(); // {name: 'mjy', age: 18, gender: '男'} ture
 
let child2 = new Child();
child2.isShow = false
console.log(child2.info.gender) // 男
child2.getInfo(); // {name: 'mjy', age: 18, gender: '男'} false

构造函数继承

在子类型构造函数内部调用父类型构造函数时,使用call()或apply()方法将父对象构造函数绑定到子对象上

优点:解决了原型链继承不能传参和父类属性共享问题

缺点:子类不能访问父类原型属性上的方法

function Parent(gender) {
  this.info = {
    name: "yhd",
    age: 19,
    gender: gender
  }
}
 
function Child(gender) {
    Parent.call(this, gender)
}
 
let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
console.log(child1.info); //{name: 'yhd', age: 19, gender: '男', nickname: 'xiaoma'}
 
let child2 = new Child('女');
console.log(child2.info); //{name: 'yhd', age: 19, gender: '女'}

组合继承

将 原型链继承 和 构造函数继承 组合到一起;通过原型链实现对原型属性和方法的继承,借用构造函数实现队实例属性的继承

优点:解决了 原型链继承 和 构造函数继承 的缺点

缺点:会调用两次超类型构造函数,一次在创建子类型原型时,一次在子类型构造函数内部

function Person(gender) {this.info = {
    name: "mjy",
    age: 19,
    gender: gender
  }
}
 
Person.prototype.getInfo = function () {   // 使用原型链继承原型上的属性和方法
  console.log(this.info.name, this.info.age)
}
 
function Child(gender) {
  Person.call(this, gender) // 使用构造函数法传递参数
}
 
Child.prototype = new Person()
 
let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
child1.getInfo() //mjy 19
console.log(child1.info); //{name: 'mjy', age: 19, gender: '男', nickname: 'xiaoma'}
 
let child2 = new Child('女');
console.log(child2.info); //{name: 'mjy', age: 19, gender: '女'}

原型式继承

方法一:在构造函数A内部临时创建一个构造函数B;将传入A的对象作为B的原型;最后返回B的新实例

function createObject(obj) {
  function Fun() {}
  Fun.prototype = obj
  return new Fun()
}
 
let person = {
  name: 'mjy',
  age: 18,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is:', this.name)
  }
}
 
let child1 = createObject(person)
child1.name = 'xxxy'
child1.hoby.push('rap')
let child2 = createObject(person)
 
console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

方法二:Object.create() 是把现有对象的属性，挂到新建对象的原型上，新建对象为空对象

    ECMAScript 5通过增加Object.create()方法将原型式继承的概念规范化了。这个方法接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象（第二个可选）。在只有      一个参数时，Object.create()与这里的函数A方法效果相同。

let person = {
  name: 'mjy',
  age: 19,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is: ', this.name)
  }
}
 
let child1 = Object.create(person)
child1.name = 'xxt'
child1.hoby.push('rap')
let child2 = Object.create(person)
 
console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

寄生式继承

寄生式继承的思路与(寄生) `原型式继承` 类似, 即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。

优点:不需要单独创建构造函数。

缺点:通过寄生式给对象添加函数,导致函数不能复用,从而降低效率

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}
 
function createAnother(obj) {
  let clone = objectCopy(obj);
  clone.showName = function () {
    console.log('my name is：', this.name);
  };
  return clone;
}
 
let person = {
     name: "mjy",
     age: 18,
     hoby: ['唱', '跳']
}
 
let child1 = createAnother(person);
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
child1.showName(); // my name is： mjy
 
let child2 = createAnother(person);
console.log(child2.hoby); // ['唱', '跳', 'rap']

 

寄生组合式继承

组合继承是常用的经典继承模式，不过，组合继承最大的问题就是无论什么情况下，都会调用两次父类构造函数；一次是在创建子类型的时候，一次是在子类型的构造函数内部。寄生组合继承就是为了降低父类构造函数的开销而实现的。

优点:高效率只调用一次超类型函数,避免了在子类型上创建不必要的属性

缺点:代码复杂

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}
 
function inheritPrototype(child, parent) {
  let prototype = objectCopy(parent.prototype);
  prototype.constructor = child;
  Child.prototype = prototype;
}
 
function Parent(name) {
  this.name = name;
  this.hoby = ['唱', '跳']
}
 
Parent.prototype.showName = function () {
  console.log('my name is：', this.name);
}
 
function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
 
inheritPrototype(Child, Parent);
Child.prototype.showAge = function () {
  console.log('my age is：', this.age);
}
 
let child1 = new Child("mjy", 18);
child1.showAge(); // 18
child1.showName(); // mjy
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
 
let child2 = new Child("yl", 18);
child2.showAge(); // 18
child2.showName(); // yl
console.log(child2.hoby); // ['唱', '跳']

 

标签：function,child1,console,name,继承,几种,log,JS,构造函数
来源： https://www.cnblogs.com/qianduan-Wu/p/16609491.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。