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();
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容