JavaScript的继承相关问题

继承有什么作用?

继承可以让子类拥有父类的方法和属性,然后在这个基础上进行方法和属性调用,可以提高代码的复用性和效率。

下面两种写法有什么区别?

//方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('饥人谷', 2)
//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('若愚', 27);
  • 写法1 把printName方法放在了构造函数里,每次new一个对象的时候,都会实例化当前对象的printName方法。如果当前new10个People对象,都会重复实例化当前printName方法10次,这样重复非常浪费空间。
  • 写法2 在每次new一个对象的时候,都不会重复实例化printName方法,因为printName方法在原型链上,如果当前new10个People对象,原型链上printName不会重复实例化,所有的对象都会共用原型链上的方法,这样就会节约空间。

Object.create 有什么作用?兼容性如何?

Object.create()方法使用指定的原型对象和其属性创建了一个新的对象。
语法 Object.create(proto, [ propertiesObject ])
参数
proto 一个对象,应该是新创建的对象的原型。
propertiesObject 可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符(这些属性描述符的结构与Object.defineProperties()的第二个参数一样)。注意:该参数对象不能是 undefined,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。

兼容性:

create.png

hasOwnProperty有什么作用? 如何使用?

hasOwnProperty()方法会返回一个布尔值,指示对象是否具有指定的属性作为自身(不继承)属性。

var o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false

如下代码中call的作用是什么?

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //这里的 call 有什么作用
    this.age = age;
}

call 调用Person函数 第一个参数this指向Male,使Male函数实现构造函数继承,获取Person下的属性

补全代码,实现继承

function Person(name, sex){
    // todo ...
}

Person.prototype.getName = function(){
    // todo ...
};    

function Male(name, sex, age){
   //todo ...
}

//todo ...
Male.prototype.getAge = function(){
    //todo ...
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();

代码实例

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
Person.prototype.getName = function(){
    console.log('Person name is '+ this.name);
};    
function Male(name, sex, age){
    Person.call(this, name, sex);
    this.age = age;
}
// 方法1
Male.prototype = new Person();
// 方法2
// Male.prototype = Object.create(Person.prototype)
Male.prototype.printName = function(){
    console.log(this.name);
}
Male.prototype.getAge = function(){
    console.log(this.name +'--'+ this.age);
};
var ruoyu = new Male('若愚', '男', 27);
var jirengu = new Person('jirengu', '男', 3);
ruoyu.printName();
ruoyu.getAge();
jirengu.getName();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容