1. ES6的extends
使用extends 关键字实现类之间的继承。这比在ES5中使用继承要方便很多。
//定义类父类
class Animal {
constructor(color) {
this.color = color;
}
greet(sound) {
console.log(sound);
}
}
class Dog extends Animal {
constructor(color) {
super(color);
this.color = color;
}
}
let dog = new Dog('黑色');
dog.greet('汪汪'); // "汪汪"
console.log(dog.color); // "黑色"
2. 利用原型和call
const extend = (Target, Origin) => {
// Origin.call(Target)
function Fun() {
}
Fun.prototype = Origin.prototype
Target.prototype = new Fun()
//Target.prototype = Object.create(Origin.prototype)
Target.prototype.constructor = Target
Target.prototype.uber = Origin.prototype
}
Father.prototype.b = 1
function Father() {
this.a=2
}
function Son() {
// Father.call(this)
}
extend(Son, Father)
var son = new Son();
var father = new Father();
console.log(son.b)
console.log(son.a)
3. 寄生组合式继承
function Animal(color) {
this.color = color;
this.name = 'animal';
this.type = ['pig', 'cat'];
}
Animal.prototype.greet = function(sound) {
console.log(sound);
}
function Dog(color) {
Animal.apply(this, arguments);
this.name = 'dog';
}
/* 注意下面两行 */
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.getName = function() {
console.log(this.name);
}
var dog = new Dog('白色');
var dog2 = new Dog('黑色');
dog.type.push('dog');
console.log(dog.color); // "白色"
console.log(dog.type); // ["pig", "cat", "dog"]
console.log(dog2.type); // ["pig", "cat"]
console.log(dog2.color); // "黑色"
dog.greet('汪汪'); // "汪汪"
Object.create()的浅拷贝的作用类式下面的函数:
function create(obj) {
function F() {
};
F.prototype = obj;
return new F();
}
这里还需注意一点,由于对Animal的原型进行了拷贝后赋给Dog.prototype,因此Dog.prototype上的constructor属性也被重写了,所以我们要修复这一个问题:Dog.prototype.constructor = Dog;
运用闭包私有化变量的写法
const inherit = (() => {
let F = function () {
}
return (Target,Origin) => {
F.prototype= Origin.prototype
Target.prototype = new F()
Target.prototype.constructor = Target
Target.prototype.uber = Origin.prototype
}
})()