美文网首页
js继承方法之原型链继承

js继承方法之原型链继承

作者: Sccong | 来源:发表于2017-10-11 20:29 被阅读0次
// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};

函数里this的属性 和 函数外prototype的属性,在new之后,都会被子类继承

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

// Test Code
var cat = new Cat();
console.log(cat.name); //cat
console.log(cat.eat('fish')); //cat正在吃:fish
console.log(cat.sleep()); //cat正在睡觉!
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

需要注意的是,原型链的继承方式,创建子类时,无法像父类构造传参,而且来自原型对象的引用属性是所有实例共享的,测试代码如下

function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
  //实例引用属性
  this.features = [];
}
function Cat(name){
}
Cat.prototype = new Animal();

var tom = new Cat('Tom'); //创建子类的时候传参数,看下面输出,有没有效果
var kissy = new Cat('Kissy');

console.log(tom.name); // "Animal"  说明传参没有效果
console.log(kissy.name); // "Animal"
console.log(tom.features); // []
console.log(kissy.features); // []

tom.name = 'Tom-New Name';
tom.features.push('eat');

//针对父类实例值类型成员的更改,不影响
console.log(tom.name); // "Tom-New Name"
console.log(kissy.name); // "Animal"
//针对父类实例引用类型成员的更改,会通过影响其他子类实例
console.log(tom.features); // ['eat']
console.log(kissy.features); // ['eat']

原因分析:

关键点:属性查找过程

执行tom.features.push,首先找tom对象的实例属性(找不到),
那么去原型对象中找,也就是Animal的实例。发现有,那么就直接在这个对象的
features属性中插入值。
在console.log(kissy.features); 的时候。同上,kissy实例上没有,那么去原型上找。
刚好原型上有,就直接返回,但是注意,这个原型对象中features属性值已经变化了。
function Animal(name){
  this.name=name
}
Animal.prototype.eat = function(food){
  console.log(this.name + '吃' + food)
}

function Cat(){}
Cat.prototype = new Animal();
Cat.prototype.name = '猫';

let final = new Cat();//无法在这里像父类传参
final.eat('鱼') // 输出 "猫吃鱼"

摘录自 http://www.cnblogs.com/humin/p/4556820.html

相关文章

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

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

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

  • JS继承

    JS继承的几种实现方式 继承是指子类继承父类的属性和方法,要实现继承,首先我们需要有一个父类 原型链继承 原型链继...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • js实现继承的几种方式

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

  • 我碰到的前端面试题(js)

    1.js实现继承有哪几种方法? 方法一:原型链继承 方法二: 构造函数继承 方法三: 组合继承 2.this指向问...

  • JS继承的方法

    JS继承的方法有六种: 1、原型链继承 2、构造继承 3、实例继承 4、拷贝继承 5、组合继承 6、寄生组合继承

  • js继承方法之原型链继承

    函数里this的属性 和 函数外prototype的属性,在new之后,都会被子类继承 需要注意的是,原型链的继承...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

网友评论

      本文标题:js继承方法之原型链继承

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