繼承

問題

1.繼承有什么作用?

  • 繼承是指一個對象直接使用另一對象的屬性和方法。
  • 作用:
    1.當js中的兩個對象有很多的共性時,子對象的構(gòu)造函數(shù)沒必要重新實現(xiàn)父對象的共性,而可以采用繼承的方式茅诱,繼承父對象的屬性和方法为流,這樣子對象在擁有父對象的特性的同時,也可以對自己的特性進行擴充让簿,實現(xiàn)了代碼的復用敬察,程序的優(yōu)化,js中通過原型鏈來實現(xiàn)繼承尔当。
    2.用純js做一些復雜的工具或框架系統(tǒng)就要用到了莲祸,比如webgis、或者js框架如jquery椭迎、ext等锐帜,繼承可以減少代碼量,有利于維護代碼

2.有幾種常見創(chuàng)建對象的方式? 舉例說明?

  • 字面量形式:var obj={a:1,b:2}

  • 構(gòu)造函數(shù)方式畜号,先創(chuàng)建一個構(gòu)造函數(shù)(有參數(shù))苍碟,通過new創(chuàng)建
    function people(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
    console.log('my name is',this.name)
    }
    }
    var p1=new people('mike',20)

  • 工廠模式 认罩,通過return得到不同的對象返回值名惩,但是得不到對象的類型
    function createPeople(name,sex){
    var obj={
    name:name,
    sex:sex,
    sayName:function(){
    console.log('my name is',this.name)
    }
    }
    return obj
    }
    var p1=createPeople('nick','man')
    var p2=createPeople('mary','woman')

  • 原型方式 碟摆,在構(gòu)造函數(shù)內(nèi)部定義對象的屬性,在構(gòu)造函數(shù)的原型對象中定義公共的方法痹升,節(jié)省代碼建炫,優(yōu)化內(nèi)存

     function createPeople(name,sex){
     this.name=name;
     this.sex=sex;
     }
     createPeople.prototype.sayName=function(){
     console.log('my name is '+this.name)
     }
     var p1= new createPeople('nick','man')
     p1.sayName()
     var p2= new createPeople('mary','woman')
     p2.sayName()
    

3.下面兩種寫法有什么區(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);
  • 方法1,使用的是構(gòu)造函數(shù)的模式疼蛾,這種方法創(chuàng)建對象的屬性和方法都是在構(gòu)造函數(shù)的內(nèi)部創(chuàng)建并執(zhí)行肛跌,無法實現(xiàn)繼承和擴展,每次創(chuàng)建都要重新執(zhí)行函數(shù)察郁,重復創(chuàng)造消耗空間和性能衍慎,
  • 方法2,使用的原型方式皮钠,將對象共有的方法printName在構(gòu)造函數(shù)的原型中定義稳捆,這樣每次創(chuàng)建對象時,printName方法不會重復創(chuàng)建鳞芙,當創(chuàng)造對象時眷柔,直接調(diào)用原型對象中保存的方法期虾,實現(xiàn)了繼承原朝,便于擴展,有利于代碼簡潔镶苞,性能的優(yōu)化

4.Object.create有什么作用喳坠?兼容性如何?如何使用茂蚓?

  • Object.create() 方法創(chuàng)建一個擁有指定原型和若干個指定屬性的對象壕鹉。

  • 兼容性:IE9+,Chrome5+,Firfox4.0+,Opera11.60+,Safari5+

  • 使用Object.create()來實現(xiàn)類式繼承,語法:Object.create(*proto,* [ *propertiesObject* ]),將創(chuàng)建的原型對象賦值到新函數(shù)的原型剃幌,實現(xiàn)繼承
    // 構(gòu)造函數(shù)
    function people(name,sex){
    this.name=name;
    this.sex=sex;
    }
    people.prototype.printName=function(){
    console.log('my name is '+this.name)
    }
    function student(name,sex,grade){
    people.call(this,name,sex)
    this.grade=grade;
    }
    //Object.create來使student繼承people的方法
    function inherit(parent,child){
    var _prototype=Object.create(parent.prototype)
    _prototype.constructor=child;
    child.prototype=_prototype;
    }
    inherit(people,student)

    student.prototype.study=function(){
      console.log(this.name+'是'+this.grade+'學生')
    }
    var p1=new student('nick','man','三年級');
    p1.printName();
    p1.study();
    

5.hasOwnProperty有什么作用? 如何使用晾浴?

  • hasOwnProperty()方法用來判斷某個對象是否含有指定的自身屬性负乡。

  • 所有繼承了 Object.prototype的對象都會從原型鏈上繼承到 hasOwnProperty 方法,這個方法可以用來檢測一個對象是否含有特定的自身屬性脊凰,和 運算符不同抖棘,該方法會忽略掉那些從原型鏈上繼承到的屬性。

  • 使用 hasOwnProperty方法判斷某對象是否含有特定的自身屬性
    var obj={};
    obj.name="nick";
    function test() {
    obj.newName=obj.name;
    delete obj.name;
    }

    obj.hasOwnProperty('name');//true
    test();
    obj.hasOwnProperty('name');//false
    obj.hasOwnProperty('newName');//true
    
  • hasOwnProperty 方法對待自身屬性和繼承屬性的區(qū)別
    var obj=new Object();
    obj.name="mike";//自身屬性
    obj.hasOwnProperty('name')//true
    obj.hasOwnProperty('toString')//false,繼承Object的屬性
    obj.hasOwnProperty('hasOwnProperty')//false,繼承Object的屬性

  • 如果一個對象擁有自己的 hasOwnProperty方法, 則原型鏈上的同名方法會被遮蔽(shadowed)
    var foo={
    hasOwnProperty:function () {
    return false
    },
    name:'nick'
    }
    foo.hasOwnProperty('name')//false,因為一直調(diào)用了obj的hasownProperty
    //解決方法狸涌,直接使用原型鏈的真正的hasOwnProperty
    ({}).hasOwnProperty.call(foo, 'bar'); //true,請在控制臺直接操作切省,不然會報錯
    Object.prototype.hasOwnProperty.call(foo,'name')//true

  • 遍歷一個對象的所有自身屬性
    var buz = {
    fog: 'stack'
    };

          for (var name in buz) {
              if (buz.hasOwnProperty(name)) {
                  alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
              }
              else {
                  alert(name); // toString or something else
              }
          }
    

6.實現(xiàn)Object.create的 polyfill

  • 一個shim是一個庫,它將一個新的API引入到一個舊的環(huán)境中,而且僅靠舊環(huán)境中已有的手段實現(xiàn)
  • 一個polyfill就是一個用在瀏覽器API上的shim.我們通常的做法是先檢查當前瀏覽器是否支持某個API,如果不支持的話就加載對應(yīng)的polyfill.然后新舊瀏覽器就都可以使用這個API了
    function create(obj){
    function temp(){};
    var newObj=(function(obj){
    if(typeof obj!='object'){
    throw TypeError('Object prototype may only be an Object or null')
    }
    temp.prototype=obj;
    var prot=new temp();
    temp.prototype=null;
    return prot
    })(obj)
    return newObj;
    }
    var obj={a:1,b:2}
    var obj2=create(obj)
    console.log(obj2.a)

7.如下代碼中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方法執(zhí)行一個函數(shù),傳入執(zhí)行期上下文和函數(shù)的參數(shù)帕胆,把this的作用域指向了person朝捆,在Male函數(shù)下執(zhí)行person(name,sex),因此也繼承了person的name和sex屬性

8.補全代碼,實現(xiàn)繼承

    function Person(name, sex){
        this.name=name;
        this.sex=sex;
    }

    Person.prototype.getName = function(){
       return this.name
    };    

    function Male(name, sex, age){
       Person.call(this,name,sex)
       this.age=age
    }

    var _prototype=Object.create(Person.prototype);
    _prototype.constructor=Male;
    Male.prototype=_prototype;

    Male.prototype.printName=function(){
        console.log('name is '+this.name)
    }
    
    Male.prototype.getAge = function(){
        return this.age
    };

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

代碼題

實現(xiàn)如下dialog 彈窗功能懒豹, 參考效果

代碼預覽
效果預覽 由于作業(yè)上傳上去GitHub上有芙盘,班級預覽項目沒有?使用了jsbin預覽

  • 小結(jié):發(fā)現(xiàn)鼠標的拖拽效果不寫data緩存數(shù)據(jù)也能實現(xiàn)脸秽。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末何陆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子豹储,更是在濱河造成了極大的恐慌贷盲,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件剥扣,死亡現(xiàn)場離奇詭異巩剖,居然都是意外死亡,警方通過查閱死者的電腦和手機钠怯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門佳魔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晦炊,你說我怎么就攤上這事鞠鲜。” “怎么了断国?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵贤姆,是天一觀的道長。 經(jīng)常有香客問我稳衬,道長霞捡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任薄疚,我火速辦了婚禮碧信,結(jié)果婚禮上赊琳,老公的妹妹穿的比我還像新娘。我一直安慰自己砰碴,他們只是感情好躏筏,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著呈枉,像睡著了一般寸士。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碴卧,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天弱卡,我揣著相機與錄音,去河邊找鬼住册。 笑死婶博,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的荧飞。 我是一名探鬼主播凡人,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼叹阔!你這毒婦竟也來了挠轴?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤耳幢,失蹤者是張志新(化名)和其女友劉穎岸晦,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體睛藻,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡启上,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了店印。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片冈在。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖按摘,靈堂內(nèi)的尸體忽然破棺而出包券,到底是詐尸還是另有隱情,我是刑警寧澤炫贤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布溅固,位于F島的核電站,受9級特大地震影響照激,放射性物質(zhì)發(fā)生泄漏发魄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一俩垃、第九天 我趴在偏房一處隱蔽的房頂上張望励幼。 院中可真熱鬧,春花似錦口柳、人聲如沸苹粟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嵌削。三九已至,卻和暖如春望艺,著一層夾襖步出監(jiān)牢的瞬間苛秕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工找默, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留艇劫,地道東北人。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓惩激,卻偏偏與公主長得像店煞,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子风钻,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

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

  • 繼承有什么作用? (難度:3*) 繼承可以使一個對象直接使用另一個對象的屬性和方法顷蟀。 有幾種常見創(chuàng)建對象的方式? ...
    coolheadedY閱讀 524評論 0 0
  • 1. apply、call 骡技、bind有什么作用鸣个,什么區(qū)別? call ,apply的作用:調(diào)用一個函數(shù)布朦,傳入函數(shù)...
    Rising_suns閱讀 395評論 0 0
  • 問答 繼承有什么作用?繼承可以將另一個function上的prototype拷貝過來毛萌,當想做多個屬性的面包的時候會...
    StarLikeRain閱讀 274評論 0 0
  • 作業(yè) this 相關(guān)問題 問題1: apply、call 有什么作用喝滞,什么區(qū)別apply()和call()函數(shù)都可...
    饑人谷_桶飯閱讀 389評論 0 0
  • apply阁将、call 、bind有什么作用右遭,什么區(qū)別 apply:fn.apply( obj做盅,])將fn函數(shù)里的t...
    邵志遠閱讀 493評論 0 0