learning javascript - 继承

inapt 发布于2019-08-22 14:57 / 1932人阅读

摘要：让子的原型链指向父的实例父实例化的对象让父的属性创建在子的上把的方法应用到这个对象身上传递一个数组或，而就要一个个地传过案例中的继承在中实现继承等价于

继承 call实现继承

用于实现函数继承，call的第二个参数可以是任意类型

function Animal(){
    this.name = "";
    this.say = function(){
        console.log("hello");
    }
}

function dog(){
    this.name = "xiao";
    //把Animal的方法应用到dog这个对象身上
    Animal.call(this);
}

console.log(new dog()); // dog { name: "", say: [Function] }

apply实现继承

用于实现函数继承，apply的第二个参数必须是数组，也可以是arguments

function Animal(){
    this.name = "";
    this.say = function(){
        console.log("hello");
    }
}

function dog(){
    this.name = "xiao";
    //把Animal的方法应用到dog这个对象身上
    Animal.apply(this,arguments);
}

console.log(new dog()); // dog { name: "", say: [Function] }

继承的优化

如果构造函数this绑定太多属性,在实例化后会造成浪费，为此我们一般会使用原型链来优化，但是使用原型链之后我们的apply和call的继承方法就会失效，因此我们一般使用混合的写法。

让子的原型链指向父的实例（父实例化的对象）
dog.prototype = new Animal();

让父的属性创建在子的this上
Animal.call(this)

function Animal(name){
    this.name = name;
    this.say = function(){
        console.log("hello");
    }
}
Animal.prototype.action = function() {
     console.log("running");
}
function dog(name,type){
    this.name = name;
    //把Animal的方法应用到dog这个对象身上
    Animal.call(this,type);
}

dog.prototype = new Animal();

console.log(new dog("xiao", "gold")); // Animal { name: "gold", say: [Function] }
(new dog("xiao")).action() //running

apply 传递一个数组或arguments，而call就要一个个地传过

案例

es5中的继承

function Reactangle(length,width) {
  this.length = length;
  this.width = width;
}

Reactangle.prototype.getArea = function(){
  return this.length * this.width;
}

function Square(length) {
  Reactangle.call(this.length,length);
}

Square.prototype = Object.create(Reactangle.prototype,{
  constructor: {
    value:Square,
    enumerable:true,
    writeable:true,
    configurable:true
  }
});

var square = new Square(3);

console.log(square.getArea());
console.log(square instanceof Square);
console.log(square instanceof Reactangle);

在es6中实现继承

class Reactangle {
   constructor(length,width) {
     this.length = length;
     this.width = width;
   }
   
   getArea() {
      return this.length * this.width;
   }
}

class Square extends Reactangle {
  constructor(length) {
    // 等价于 Reactangle.call(this.length,length)
    super(length,length);
  }
}

var square = new Square(3);

console.log(square.getArea()); // 9
console.log(square instanceof Square); // true

GPU云服务器云服务器 javascript继承 javascript继承方法 Javascript实现继承 javascript类的继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93029.html

[译] 在你学习 React 之前必备的 JavaScript 基础

摘要：前言在理想的状态下，你可以在深入了解之前了解和开发的所有知识。继承另一个类的类，通常称为类或类，而正在扩展的类称为类或类。这种类型的组件称为无状态功能组件。在你有足够的信心构建用户界面之后，最好学习。原文地址：JavaScript Basics Before You Learn React 原文作者： Nathan Sebhastian 写在前面为了不浪费大家的宝贵时间，在开...

Chaz 2019-08-23 17:54 评论0 收藏0
[译] 如何恰当地学习 JavaScript

摘要：原文链接恰当地学习适合第一次编程和非的程序员持续时间到周前提无需编程经验继续下面的课程。如果你没有足够的时间在周内完成全部的章节，学习时间尽力不要超过周。你还不是一个绝地武士，必须持续使用你最新学到的知识和技能，尽可能地经常持续学习和提高。原文链接：How to Learn JavaScript Properly 恰当地学习 JavaScript （适合第一次编程和非 JavaSc...

Jason 2019-08-21 12:06 评论0 收藏0
learning javascript - 数组

摘要：过滤掉等于的数组元素返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值数组元素平方用于检测数组中的元素是否满足指定条件如果有一个元素满足条件，则表达式返回剩余的元素不会再执行检测如果没有满足条件的元素，则返回。数组常用方法创建数组 var fruits = [Apple, Banana]; console.log(fruits.length); 通过索引访问数组元素 v...

zzir 2019-08-22 14:54 评论0 收藏0
python基础教程：类的继承

摘要：类的继承，说明了不同类直接的关系，派生类复用了基类的代码同时也继承了基类的属性和方法。派生类的实例化会创建该类的一个新实例。派生类既可以单独继承一个基类，也可以多重继承多个基类。面向对象语言的一个特性就是类的继承。继承的关系跟人类繁衍的关系相似，被继承的类称为基类（也叫做父类），继承而得的类叫派生类（也叫子类），这种关系就像人类的父子关系。 showImg(https://segme...

XFLY 2019-07-31 10:27 评论0 收藏0