继承

2018-03-27  本文已影响0人  YangJeremy

JavaScript并不提供原生的继承机制,我们自己实现的方式很多,介绍一种最为通用的

通过上面定义我们可以看出我们如果实现了两点的话就可以说我们实现了继承

得到一个类的属性
得到一个类的方法
我们分开讨论一下,先定义两个类

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
};

function Male(age){
    this.age = age;
}

Male.prototype.printAge = function(){
    console.log(this.age);
};

属性的获取

对象属性的获取是通过构造函数的执行,我们在一个类中执行另外一个类的构造函数,就可以把属性赋值到自己内部,但是我们需要把环境改到自己的作用域内,需要用到call方法

function Male(name, sex, age){
    Person.call(this, name, sex);
    this.age = age;
}

Male.prototype.printAge = function(){
    console.log(this.age);
};

实例化结果看看:

var m = new Male('Byron', 'male', 26);
console.log(m.sex); // "male"

方法获取

我们知道类的方法都定义在了prototype里面,所以只要我们把子类的prototype改为父类的prototype的备份就好了

Male.prototype = Object.create(Person.prototype);

防止方法被覆盖,得这么写:

function Male(name, sex, age){
    Person.call(this, name, sex);
    this.age = age;
}

Male.prototype = Object.create(Person.prototype);

Male.prototype.printAge = function(){
    console.log(this.age);
};

prototype对象有一个属性constructor指向其类型,因为我们复制的父元素的prototype,这时候constructor属性指向是不对的,导致我们判断类型出错, 因此我们需要再重新指定一下constructor属性到自己的类型。补上这一句:

Male.prototype.constructor = Male

最终是这个样子的:


function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
};

function Male(name, sex, age){
    Person.call(this, name, sex);
    this.age = age;
}

Male.prototype = Object.create(Person.prototype);

Male.prototype.constructor = Male;


Male.prototype.printAge = function(){
    console.log(this.age);
};

这样就实现了最终的继承。

hasOwnProperty

hasOwnPerperty是Object.prototype的一个方法,可以判断一个对象是否包含自定义属性而不是原型链上的属性,hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数

m.hasOwnProperty('name'); // true
m.hasOwnProperty('printName'); // false
Male.prototype.hasOwnProperty('printAge'); // true

上一篇 下一篇

猜你喜欢

热点阅读