• 繼承有什么作用? （難度:3*）
• 繼承可以使一個(gè)對(duì)象直接使用另一個(gè)對(duì)象的屬性和方法。
• 有幾種常見(jiàn)創(chuàng)建對(duì)象的方式? 舉例說(shuō)明? （難度:4*）
• 有4中常見(jiàn)的創(chuàng)建對(duì)象方式：普通模式、工廠模式、構(gòu)造函數(shù)模式、原型模式。
  1?普通模式

Plople = {
        name： ‘yangran',
        sex: 'male',
        sayName: function(){
           console.log('My name is:' + this.name);
        }
}

2工廠模式

function Plople(name, sex){
        var obj = {};
        obj.name = name;
        obj.sex = sex;
        obj.sayName = function(){
           console.log('My name is:' + this.name);   
        }
        return obj;
} 
var p1 = Plople('yangran1', 'male');
var p2 = Plople('yangran2', 'male');

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

function Plople(name, sex){
        this.name = name;
        this.sex = sex;
        this.sayName = function(){
          console.log('My name is:' + this.name);
        }
}  
var p1 = new Plople('yangran1', 'male');
var p2 = new Plople('yangran2', 'male');

4原型模式

function Plople(name, sex){
      this.name = name;
      this.sex = sex;
}
Plople.prototype.sayName = function(){
      console.log('My name is:' + this.name);
}
var p1 = new Plople('yangran1', 'male');
var p2 = new Plople('yangran2', 'male');

• 下面兩種寫(xiě)法有什么區(qū)別? （難度: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);

• 創(chuàng)建對(duì)象的模式不同：方法1為構(gòu)造函數(shù)模式，方法2為原型模式；
• printName對(duì)象方法的定義方式不同：
  方法1的printName方法定義在構(gòu)造函數(shù)內(nèi)部，屬于構(gòu)造函數(shù)特有的；
  方法2的printName方法定義在構(gòu)造函數(shù)的原型(prototype)上，可以被new Person()所創(chuàng)建的實(shí)例對(duì)象共享。
• Object.create有什么作用？兼容性如何？如何使用？ （難度:3*）

• Object.create()方法創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對(duì)象。Object.create(proto,[ propertiesObject ]),第一個(gè)參數(shù)作為所創(chuàng)建對(duì)象的原型，第二個(gè)參數(shù)是一組屬性與值為所創(chuàng)建對(duì)象的屬性與值。

  
  
  瀏覽器兼容性

function Person(name, age){
        this.name = name;
        this.age = age;
}
Person.prototype.sayName = function(){
        console.log('My name is:' + this.name);
}
function Male(sex){
       this.sex = sex;
       Person.call(this, name, age);//在Male實(shí)例對(duì)象下
}
//Male.prototype = Person.prototype;//方法1但會(huì)使Person也具備了Male的方法,不推薦
Male.prototype = Object.create(Person.prototype);//創(chuàng)建一個(gè)空對(duì)象使Person.prototype為Male.prototype的原型，Male.prototype.__proto__ === Person.prototype為true
Male.constructor = Male;//創(chuàng)建的新對(duì)象constructor指向?yàn)镺bject，這里進(jìn)行指向更改
Male.prototype.sayAge = function(){//給創(chuàng)建的新對(duì)象里添加方法
       console.log('age:' + this.sex);
}
//Male.prototype = new Person//方法3兼容環(huán)境

• Object.create方法的封裝

function inherit(superType, subType){
        var _prototype  = Object.create(superType.prototype);
        _prototype.constructor = subType;
        subType.prototype = _prototype;
}//superType為需要被繼承方法的對(duì)象，subType為需要去繼承方法的對(duì)象
inherit(Person, Male);

• hasOwnProperty有什么作用？ 如何使用？ （難度:3*）
• hasOwnPerperty是Object.prototype的一個(gè)方法，可以判斷一個(gè)對(duì)象是否包含自定義屬性而不是原型鏈上的屬性。

var Obj = {
      name: name,
      sayName:function(){
          console.log(this.name)
        }
}
Obj.hasOwnProperty('sayName')//true
Obj.hasOwnProperty('toString')//false
Obj.hasOwnProperty('name')//true

hasOwnProperty

在上例中可以看出，sayName方法與name屬性都是Obj本身自帶的屬性hasOwnProperty判斷為true，而toString方法是繼承于原型鏈上Object對(duì)象上的方法hasOwnProperty判斷為false。

• 實(shí)現(xiàn)Object.create的 polyfill，如:（ps: 寫(xiě)個(gè) 函數(shù)create，實(shí)現(xiàn) Object.create 的功能) （難度:4*）

var obj = {a: 1, b:2};
var obj2 = create(obj);
function create(obj){
  if(typeof Object.create === 'function'){
    return Object.create(obj);
  } else {
    function fn(){}
    fn.prototype = obj;
    newObj = new fn();
  }
  return newObj;
}
console.log(obj2.a); //1

• 如下代碼中call的作用是什么? （難度:4*）

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 表示在Male構(gòu)造函數(shù)的環(huán)境下使用Person構(gòu)造函數(shù)下的name、sex屬性，也就是在通過(guò)new Male()創(chuàng)建的實(shí)例對(duì)象可以傳遞name、sex參數(shù)，在Male構(gòu)造函數(shù)下創(chuàng)建Person構(gòu)造函數(shù)下的name和sex屬性。

  
  
• 補(bǔ)全代碼，實(shí)現(xiàn)繼承 （難度:4*）

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.getName();

代碼

• 實(shí)現(xiàn)如下dialog 彈窗功能， 參考效果 （難度:*****）

//功能描述：
// 1. 可使用 dialog.open() 去打開(kāi)彈窗
// 2. 當(dāng)點(diǎn)擊確定、取消時(shí)可使用用戶(hù)自定義事件
// 3. dialog 可拖動(dòng)
// 4. 允許頁(yè)面展示多個(gè) 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: '歡迎來(lái)到饑人谷',
      message: tpl,
      isShowCloseBtn: true,
      isShowConfirmBtn: true,
      onClose: function(){
        alert('close')
      },
      onConfirm: function(){
        alert('確定');
      }
    });
});

代碼1
本博客版權(quán)歸 本人和饑人谷所有，轉(zhuǎn)載需說(shuō)明來(lái)源