欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端面试——继承(学习笔记)

程序员文章站 2022-06-09 21:38:39
...

ES5

要学会继承需要学会原型链,原型关系。总结一波手写继承:
父类

// 定义一个动物类
function Animal(name) {
    // 属性
    this.name = name || 'Animal';
    // 实例方法
    this.sleep = function () {
        console.log(this.name + '正在睡觉!');
    }
}

// 原型方法
Animal.prototype.eat = function (food) {
    console.log(this.name + '正在吃' + food);
};
//test
let animal = new Animal('lin');
animal.eat('apple');
animal.sleep();

子类实现继承,需要继承实例方法和属性,也要继承原型方法和属性:

//Sub
function Dog(name, color) {
    Animal.call(this, name);
    this.color = color;
}

(function () {
		//不此处有的用new Super(),不好,多用了一次父类构造函数
        Dog.prototype = Object.create(Animal.prototype);
        //Dog.prototype没有指定constructor属性,需要指回Dog
        Dog.prototype.constructor = Dog;
        Dog.prototype.sayColor = function () {
            console.log('the dog\'s color is ' + this.color);
        }
    }
)();

let haba = new Dog('Haba', 'black');
haba.sayColor();
console.log(haba.color);
console.log(haba.name);
haba.eat('meat');
haba.sleep();
不提倡的继承方法:
  • 实例继承
var instance = new Animal();
return instance;

实例是父类的实例,不是子类的实例;不支持多继承

  • 拷贝继承
var animal = new Animal();
for(var p in animal){
    Dog.prototype[p] = animal[p];
}

特点:支持多继承
缺点:效率较低,内存占用高(因为要拷贝父类的属性);无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到。

ES6

ES6中添加了类的概念——class,相应的继承——extend。

  • class的写法:
class Fish{	//定义了一个名字为Person的类
   constructor(color){	//constructor是一个构造方法,用来接收参数
       this.color = color;	//this代表的是实例对象
   }
   sayHellofish(){
       console.log(this.name+' say hello to every fishes!')
   }
}
var fish1=new Fish("fish1");
console.log(obj.say());	//fish1 say hello to every fishes!

构造函数的参数在constructor中接受
constructor方法是类的构造函数的默认方法,通过new命令生成对象实例时,自动调用该方法。
类定义的方法不加function不用分号,不加逗号

  • 继承
//es6方法
class Fish extends Animal{
    constructor(name, color){
    	//要先跟父类建立关联
        super(name);
        this.color = color;
    }
    sayHellofish(){
        console.log(this.name+' say hello to every fishes!')
    }
}
let fish1 = new Fish('fish1', 'yellow');
fish1.sleep();	//fish1正在睡觉!
fish1.eat('smallFish');	//fish1正在吃smallFish
fish1.sayHellofish();	//fish1 say hello to every fishes!

用super关键字调用父类构造函数,在constructor中引用父类,然后在设置子类属性。

相关标签: JavaScript 前端