美文网首页
JavaScript继承

JavaScript继承

作者: 人间四月天i | 来源:发表于2019-10-22 17:50 被阅读0次

js继承方式
js是一门弱类型动态语言,封装和继承是他的两大特性

原型链继承

优点:

  • 简单易于实现
  • 实例是子类的实例,实际上也是父类的一个实例
  • 父类新增原型方法、原型属性,子类都能访问到

缺点:

  • 所有子类的实例的原型都共享同一个超类实例的属性和方法
  • 无法实现多继承
  • 在创建子类的实例时不能向父类的构造函数传递参数
父类
function animal(){
    this.name=name||"animal"
    this.sleep=function(){
        console.log(this.name+"正在睡觉!")
    }
}
animal.prototype.eat=function(food){
    console.log(this.name+"正在吃"+food)
}
子类
function cat(){}
cat.prototype=new animal()
cat.prototype.name="cat";
var cat=new cat();
console.log(cat.name);  // cat
console.log(cat.eat('fish'))  // cat正在吃fish  undefined
console.log(cat.sleep())  // cat正在睡觉  undefined
console.log(cat instanceof animal)  // true
console.log(cat instanceof cat)    // true

构造继承
通过使用call、apply方法可以在新创建的对象上执行构造函数,用父类的构造函数来增加子类的实例

1、拿不到父类中prototype中的对方和方法,无论是在调用apply()之前还是之后

2、父类中公有的对象/方法都通过this传递,每new一个实例都需要储存this的内容,耗费内存

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.type = 'person';
}
// 用apply调用Person,this(Student)代替Person的this,
//达到继承Person的对象和方法的目的
function Student(name, age, grade) {
    Person.apply(this, arguments);
    this.grade = grade;
}
var student = new Student("zhangsan", 21, "一年级");
console.log('student:', student.type) // student: person

组合继承

function F() {
// 属性
this.name = name || 'Animal';
    // 实例方法
    this.sleep = function(){
          console.log(this.name + '正在睡觉!');
    }
}
function C(name){
    F.call(this);//构造函数继承
    this.name = name || 'Tom';
}
C.prototype = new F();//原型继承
var q=new C();
console.log(q.name);  // Tom
console.log(q.sleep());  // Tom正在睡觉

ES6继承
继承会继承父类的实例属性和实例方法,并不会继承静态属性和静态方法,并且静态方法只能通过类名去调用

class father{
    constructor(name){
        this._name=name
    }
    getName(){
        console.log(this._name)
    }
    static jingtai(){
        console.log("静态")
    }
}
class son extends father{
    constructor(name,age){
        super(name)
        this._age=age
    }
}
var father=new father("小红")
father.jingtai();    // 静态
father.getName()    // 小红
var xiaoming=new son('小明',15)
xiaoming.getName()    // 小明
//子集只会继承父类的实例属性和方法,不会继承静态属性和静态方法
//静态方法只能通过类名去调用

相关文章

  • 前端面试题目(二)

    javascript对象的几种创建方式 javascript继承的6种方法 详情:[JavaScript继承方式详...

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

  • 005|JavaScript ES6新特性之Classes

    在过去,需要像 053|JavaScript 继承详解 那样实现继承。JavaScript这种继承实现方式与其它面...

  • Web前端经典面试试题及答案2

    javascript面向对象中继承实现? 面向对象的基本特征有:封闭、继承、多态。在JavaScript中实现继承...

  • 一文带你彻底理解 JavaScript 原型对象

    一、什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。 1.1 ...

  • javascript代码积累

    一、javascript实现继承 1.基于原型链实现继承 2.基于属性和方法复制实现继承 二、javascript...

  • 理解 JavaScript 中的原型链

    JavaScript 作为一门面对对象语言,但是却不支持接口继承,只支持实现继承。JavaScript 中实现继承...

  • Javascript原型和原型链

    JavaScript在ES6之前没有类似class,extend的继承机制,JavaScript的继承主要是通过原...

  • JavaScript--对象创建和继承方法

    JavaScript创建对象方法总结精彩博文javascript继承讲解精彩博文于江水 继承讲解 JavaScri...

  • JavaScript 继承

    继承是JS中非常内容,原因就是JS没有地道的继承方式,我们只能通过各种方式来模拟面向对象中的继承。下面介绍几种常见...

网友评论

      本文标题:JavaScript继承

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