繼承

1.繼承有什么作用?

繼承可以將構造函數的prototype屬性跟這個函數所創建的對象proto共享起來,這樣在創建的對象中不用重寫這些屬性跟方法,提升了代碼的復用率,使代碼關系也簡潔明了。

2.有幾種常見創建對象的方式? 舉例說明?

1.普通模式
直接賦值生成一個對象,不可復用,代碼量大。

var obj = {
            name = "jirengu",
            age = 18,
            sayName:function(){
                      console.log("this.name")  
          } 
}

2.工廠模式

    function People(name,age,sex){
        var p = {
            name:name,
            age:age,
            sex:sex,
            saySex:function(){
                console.log('我是'+this.sex)
            }
        };
        return p
    }
    var p1 = People('hunger',18,'男');
    var p2 = People('小紅',16,'女');

3.構造函數模式

function People(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.saySex = function(){
        console.log('我是'+this.sex)
    }
}
    p1 = new People('hunger',16,'男');
    p2 = new People('gu',15,'女')

這樣每創建一個對象都會有一個saySex的方法 很占用內存
4.原型模式

function People(name,age,sex){

    }
    People.prototype = {
        constructor:People,
        name:'hunger',
        age:17,
        sex:'男',
        saySxe:function(){
            console.log(this.sex)
        }
    }
    var p1 = new People()

原型模式的弊端在于因為屬性和方法共享,使得引用類型屬性容易出現問題。
5.構造函數模式和原型模式組合

function People(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    }
People.prototype.Saysex = function(){
    console.log('我是'+this.sex)
}

    var p1 = new People('hunger',13,'男')

這種模式每個實例都擁有自己的屬性,而方法添加在了原型中,實現了共用方法,所以這種模式是現在最好的構建對象的方法。

3.下面兩種寫法有什么區別?
//方法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的方法造成了資源浪費。方法2的屬性在構造函數上而方法寫在了原型prototype上,實現了共用方法,節約了資源。

4.Object.create 有什么作用?兼容性如何?如何使用?
  • Object.create的作用是創建一個指定原型并且可以選擇性的包含指定屬性的對象。
  • 兼容性:IE8以上。
    使用方法Object.craete(prototype,[])
function People(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    }

People.prototype.Saysex = function(){
    console.log('我是'+this.sex)
}
function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype = Object.create(People.prototype)
    var p1 = new Person('hunger',13,'男')//我是男
5.hasOwnProperty有什么作用? 如何使用?

判斷一個屬性是否定義在對象自身,而不是在原型鏈上

//接上例
p1.hasOwnProperty('name');//true
p1.hasOwnProperty('Saysex')//false
6.實現Object.create的 polyfill,如:(ps: 寫個 函數create,實現 Object.create 的功能)
if(typeof Object.create != 'function'){
    Obj.create = (function(){
        function Temp(){}
        var hasOwn = Object.prototype.hasOwnProperty;
        return function(proto){
            if(typeof proto != 'object'){
                throw TypeError('原型參數必須是對象或者null')
            }else{
                Temp.prototype = a;
                var obj = new Temp();
                a = null;
                if(arguments.length > 1){
                    var Properties = Object(arguments[1]);
                    for(var prop in Properties){
                        if(hasOwn.call(Properties,prop)){
                            obj[prop] = obj[prop]
                        }
                    }
                }
                return obj
            }
        }
    })()
}
7.如下代碼中call的作用是什么?
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //在Male的作用域中調用Person函數,使Male函數能夠執行Person的代碼,實現構造函數繼承
    this.age = age;
}
8. 補全代碼,實現繼承
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(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.getAge = function(){
        console.log(this.age)
    };

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

本文歸作者和饑人谷所有##

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

推薦閱讀更多精彩內容

  • 博客內容:什么是面向對象為什么要面向對象面向對象編程的特性和原則理解對象屬性創建對象繼承 什么是面向對象 面向對象...
    _Dot912閱讀 1,447評論 3 12
  • 1.繼承(接口繼承和實現繼承) 繼承是 OO 語言中的一個最為人津津樂道的概念。許多 OO 語言都支持兩種繼承方式...
    believedream閱讀 981評論 0 3
  • 1、構造函數模式 [url=]file:///C:/Users/i037145/AppData/Local/Tem...
    橫沖直撞666閱讀 871評論 0 0
  • 繼承 Javascript中繼承都基于兩種方式:1.通過原型鏈繼承,通過修改子類原型的指向,使得子類實例通過原型鏈...
    LeoCong閱讀 336評論 0 0
  • 我們所說的“拼養”,并不是很簡單地把孩子交給某個群體,而是設計孩子與父母高度參與的活動。它是孩子與父母之間一段非常...
    陳蕾FZ閱讀 647評論 0 51