繼承

問答

  • 繼承有什么作用?
    繼承可以將另一個function上的prototype拷貝過來,當(dāng)想做多個屬性的面包的時候會更加的方便,方法不用重復(fù)copy了。

  • 有幾種常見創(chuàng)建對象的方式? 舉例說明?
    "工廠模式"、“構(gòu)造函數(shù)模式”、“原型模式”
    工廠模式:
<script>
    var person = function (name,age) {
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.attribute = function (name) {
            console.log("my name is "+ this.name);
            console.log("my age is "+ this.age);
        }
        return obj;
    }
    var myself = new person("slr",21);
    myself.attribute();
</script>

構(gòu)造函數(shù)模式:

<script>
    function Person(name, age){
        this.name = name
        this.age = age
        this.attribute = function(){
            console.log(this.name + this.age);
        }
    }
    var myself = new Person("slr",21);
    var myself2 = new Person("wby",20);
    myself.attribute();
    myself2.attribute();
</script>

構(gòu)造函數(shù)是獨立的每個copy一份,雖然方法一樣,但是不是一個東西了


difference

原型模式:

<script>
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayAttribute = function () {
        console.log(this.name + this.age)
    }
    var p1 = new Person("slr",21);
    p1.sayAttribute();
</script>
共用方法了

  • 下面兩種寫法有什么區(qū)別?
//方法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);

方法一構(gòu)造出來的每個方法和屬性都是獨立的,獨一份new出來。而方法二的屬性是每個獨一份的,但是方法是共用的,上面有解釋過了。


  • Object.create 有什么作用?兼容性如何?如何使用? (難度:***)
    object.create(proto,[propertiesObject])
  • 這是ES5新出的方法
  • proto:指定的新創(chuàng)建對象的原型
  • [propertiesObject]:可選參數(shù),是對象的屬性描述符,里面可以添加一些自定義的屬性和方法。
    兼容性:只兼容IE9+,Chrome5+,F(xiàn)irefox 4.0+,Opear 11.60+,Safari 5+
<script>
    //    這是inherit
    function inherit(a, b) {
        var c = Object.create(a.prototype)
        b.prototype = c;
        c.constructor = b;
    }
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayAttribute = function () {
        console.log(this.name + this.age)
    }
    function PersonSecond(name, age, sex) {
        Person.call(this, name, age);//這里的作用就是調(diào)用函數(shù)Person在PersonSecond函數(shù)內(nèi)運行
        this.sex = sex;
    }
    //這里
    inherit(Person, PersonSecond);
    Person.prototype.newSolution = function () {
        console.log("PersonSecond sex "+ this.sex);
    }
    var p1 = new PersonSecond("slr", 21, "male");
    p1.sayAttribute();
    p1.newSolution();
</script>

  • hasOwnProperty有什么作用? 如何使用? (難度:***)
    hasOwnProperty可以得出對象是否有指定的名稱和屬性
uploaddddddddd.png

  • 實現(xiàn)Object.create的 polyfill,如:(ps: 寫個 函數(shù)create,實現(xiàn) Object.create 的功能)
function create(obj){
    if(Object.create){
        return Object.create(obj);
    }else {
        function show(){};
        show.prototype=obj;
        return new show();
    }
}
var obj = {a: 1, b:2};
var obj2 = create(obj);
console.log(obj2.a); //1

用于確認(rèn)函數(shù)的兼容性,如果兼容就可以就會執(zhí)行。

<script>
    if (typeof Object.create != 'function') {//首先判斷是否兼容
        Object.create = (function () {

            var Temp = function () {
            };

            return function (prototype) {
                if (arguments.length > 1) {
                    return false;
                }
                if (prototype !== Object(prototype)) {
                    return false;
                }
                if (prototype === null) {
                    return false;
                }

                Temp.prototype = prototype;
                var result = new Temp();
                Temp.prototype = null;
                return result;
            };
        })();
    }
</script>

  • 如下代碼中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是為了指向上一個函數(shù),讓上一個函數(shù)在Male里面執(zhí)行,以便獲得屬性。


  • 補全代碼,實現(xiàn)繼承 (難度:****)
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();
<script>
    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)//ES5的方法

    Male.prototype.getAge = function () {
        console.log(this.age)
    };
    Male.prototype.printName = function () {
        console.log(this.getName())
    }
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();
</script>

CODE

//功能描述: 
// 1. 可使用 dialog.open() 去打開彈窗
// 2. 當(dāng)點擊確定、取消時可使用用戶自定義事件
// 3. dialog 可拖動
// 4. 允許頁面展示多個 dialog
function Dialog(){
//todo ...
}
var tpl = '<ul><li>列表1</li><li>列表2</li><li>列表1</li><li>列表1</li></ul>';
$('#open4').on('click',function(){
  var dialog4 = new Dialog();
  dialog4.open({
    title: '谷',
    message: tpl,
    isShowCloseBtn: true,
    isShowConfirmBtn: true,
    onClose: function(){
      alert('close')
    },
    onConfirm: function(){
      alert('確定');
    }
  });
});

繼承-彈框

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

推薦閱讀更多精彩內(nèi)容

  • 繼承有什么作用? (難度:3*) 繼承可以使一個對象直接使用另一個對象的屬性和方法。 有幾種常見創(chuàng)建對象的方式? ...
    coolheadedY閱讀 537評論 0 0
  • 1. apply、call 、bind有什么作用,什么區(qū)別? call ,apply的作用:調(diào)用一個函數(shù),傳入函數(shù)...
    Rising_suns閱讀 403評論 0 0
  • 創(chuàng)建對象 工廠模式 => 構(gòu)造函數(shù)模式 => 原型對象模式 => 構(gòu)造函數(shù)模式+原型對象模式 工廠模式 構(gòu)造函數(shù)模...
    老虎愛吃母雞閱讀 255評論 0 0
  • apply、call 、bind有什么作用,什么區(qū)別 apply:fn.apply( obj,])將fn函數(shù)里的t...
    邵志遠(yuǎn)閱讀 549評論 0 0
  • 作業(yè) this 相關(guān)問題 問題1: apply、call 有什么作用,什么區(qū)別apply()和call()函數(shù)都可...
    饑人谷_桶飯閱讀 402評論 0 0