this、原型鏈、繼承

1. this
2.原型鏈-instanceof實現(xiàn)
3.繼承的實現(xiàn)

  • ** this 相關問題 **

** 1、 apply、call 和bind有什么作用，什么區(qū)別？**####

  var name = 'global';
  var person = {
      name: 'zero'
  };
   // 輸出姓名、年齡和職業(yè)
   function printInfo(age, job) {
       console.log(this.name, age, job);
   }
   // 直接調用
   printInfo(20, '前端工程師');
  // 打?。篻lobal 20 前端工程師
  // 因為默認的上下文是window，所以this.name是全局定義的global，   如果我們想打印出來zero的話，就需要改變函數(shù)執(zhí)行的上下文
   printInfo.call(person, 20, '前端工程師');
   printInfo.apply(person, [20, '前端工程師']);
   // 這兩種方式是一樣的，第一個參數(shù)都是傳進去的上下文，this.name取的是person.name，所以打印出來的名字就是zero了，后面的為age和job，只是參數(shù)傳遞的方式不一樣，apply比較特殊，把要傳的參數(shù)放在數(shù)組里面
  // 而bind和以上兩種有區(qū)別，bind是es5定義的新方法，用來返回一個有自己上下文的函數(shù)，用法也比較類似：
  printInfo.bind(person)(20, '前端工程師');
  // printInfo.bind(person)這一塊是返回的以peron為上下文的函數(shù)，后面的(20, '前端工程師')是函數(shù)調用

  • 他們的常用用法：
    1.數(shù)組之間的追加；
    2.獲取數(shù)組中的最大值和最小值，利用他們擴充作用域擁有Math的min和max方法；
    由于沒有什么對象調用這個方法，所以第一個參數(shù)可以寫作null或者本身；

    var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(Math, numbers),   //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

3.驗證是否是數(shù)組（前提是toString（）方法沒有被重寫過）

  function   isArray(obj){ 
       return Object.prototype.toString.call(obj) === '[object Array]' ;
    }

4.讓類數(shù)組擁有數(shù)組的方法

比如arguments對象，獲取到的文檔節(jié)點等，并沒有數(shù)組的那些方法：

   Array.prototype.slice.apply（argument）; //理論上來說這個比較快，直接在原型上查找slice方法
                                                             //但實際上比較慢

或者

    [].slice.apply(arguments); //理論上來說這個比較慢，因為要Array做一個實例化再查找slice方法
                                    //實際上比較快，因為現(xiàn)在的各種自動化工具會把上一種方法轉換為這種，而第二種代碼比較簡潔，所以會比較快；

bind（）--也是改變函數(shù)體內(nèi)this的指向;
bind會創(chuàng)建一個新函數(shù)，稱為綁定函數(shù)，當調用這個函數(shù)的時候，綁定函數(shù)會以創(chuàng)建它時傳入bind（）方法的第一個參數(shù)作為this，傳入bind（）方法的第二個及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調用原函數(shù)；

bind與apply、call最大的區(qū)別就是：bind不會立即調用，其他兩個會立即調用
例子：

  • 三個的使用區(qū)別：
    • 都是用來改變函數(shù)的this對象的指向的；
    • 第一個參數(shù)都是this要指向的對象；
    • 都可以利用后續(xù)參數(shù)傳參；
    • call方法接收參數(shù)列表，而apply方法接收參數(shù)數(shù)組；bind是返回對應函數(shù)，便于稍后調用，apply、call是立即調用；

** 2、以下代碼輸出什么? **####

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//John:hi!

調用了對象john的函數(shù)，this指向john對象，輸出John:hi!

** 3、下面代碼輸出什么，為什么？ **####

func() 
function func() { 
  alert(this)
}
//Object window

因為在函數(shù)func()被直接調用時，this綁定到全局對象。在瀏覽器中，window 就是該全局對象。

** 4、下面代碼輸出什么？ **####

 document.addEventListener('click', function(e){
     console.log(this);    //  輸出document對象,點擊頁面，控制臺輸出document。綁定事件函數(shù)時，this表示觸發(fā)此事件的DOM對象。
setTimeout(function(){
    console.log(this);     //  輸出window對象,setTimeout、setInterval這兩個方法執(zhí)行的函數(shù)this也是全局對象
   }, 200);
}, false);

** 5、下面代碼輸出什么，why **####

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
//John

func()函數(shù)通過call()函數(shù)調用，此時this代表John對象，john.firstName存在，輸出"John"

** 6、以下代碼有什么問題，如何修改 **####

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this)   //this指什么  //這里的this指的是觸發(fā)此事件的DOM對象，不是module。
      this.showMsg();  ////由于this是$btn，所以在執(zhí)行這句是會報錯。
    })
 },

  showMsg: function(){
   console.log('饑人谷');
  }
}

修改如下：

var module= {
   bind: function(){
    var _this = this;  //先將this賦給變量_this保存起來。在調用函數(shù)bind時，這里的this就是對象module。
$btn.on('click', function(){
  console.log(this) 
  _this.showMsg();  //此時相當于執(zhí)行module.showMsg().輸出：饑人谷。
})
},

showMsg: function(){
      console.log('饑人谷');
  }
}
  • 原型鏈相關問題

** 7、有如下代碼，解釋Person、 prototype、proto、p、constructor之間的關聯(lián)。**####

  function Person(name){
       this.name = name;
   }
  Person.prototype.sayName = function(){
      console.log('My name is :' + this.name);
  }
  var p = new Person("若愚")
  p.sayName();

  function Person(name){
      this.name = name;
   }
  Person.prototype.sayName = function(){
      console.log('My name is :' + this.name);
  }
  var p = new Person("若愚")
  p.sayName();
  • Preson是構造函數(shù)，也是一個對象.
  • p為Person的實例，擁有Person原型鏈上的屬性和方法.
  • prototype是構造函數(shù)內(nèi)部的原型對象，該對象內(nèi)部的屬性和方法能夠被實例所繼承；
  • constructor是定義在構造函數(shù)原型對象prototype上的屬性;
  • proto為實例對象的屬性，其指向構造函數(shù)的原型對象prototype；

8、上例中，對對象 p可以這樣調用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈。####

  • toString是對象p繼承的Object對象的方法。

  • 什么是原型鏈?

    JS在創(chuàng)建對象（不論是普通對象還是函數(shù)對象）的時候，都有一個叫做proto的內(nèi)置屬性，用于指向創(chuàng)建它的函數(shù)對象的原型對象prototype。在訪問一個對象屬性的時候，如果對象本身沒有找到這個屬性，就會沿著原型鏈一層一層的尋找。

prototype.png

** 9、對String做擴展，實現(xiàn)如下方式獲取字符串中頻率最高的字符 **####

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現(xiàn)了5次

代碼擴展如下：

//獲取字符串中頻率最高的字符
        String.prototype.getMostOften = function(){
        var obj = {};
        var str = this;
        for(var i=0;i<str.length;i++){
            var key = str[i];
            if(!obj[key]){
                obj[key] =1;
            }else{
                obj[key]++;
            }
        }
        
        var max = 0;
        var max_key = '';
        for(key in obj){
        if(obj[key]>max){
            max = obj[key];
            max_key = key;
            }
        }
        
        return max_key;
        }
        var str = 'ahbbccdeddddfg';
        var ch = str.getMostOften();
        console.log(ch);  //d 因為d出現(xiàn)了5次

** 10、instanceOf有什么作用？內(nèi)部邏輯是如何實現(xiàn)的？**####

  • instanceOf：判斷一個對象是否為另一個對象的實例。繼承中判斷實例是否屬于它的父類。

  • 內(nèi)部邏輯：順著對象的原型連一直往上找,若原型鏈上的某一個proto指向了構造函數(shù)的prototype則返回true，找完了原型鏈也找不到則返回false。
    function instanceOf(obj,fn){
    var oldpro = obj.proto;
    while(oldpro){
    if(oldpro === fn.prototype){
    return true;
    }else{
    oldpro = oldpro.proto;
    }
    }
    return false;
    }

  • 繼承相關問題

** 11、繼承有什么作用? **####

繼承是指：一個對象直接使用另一個對象的屬性和方法。提高重用性，同時也是面向對象編程里的一個概念，可以簡化對事物的描述。

** 12、下面兩種寫法有什么區(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);
  • 方法一printName這個方法作為構造函數(shù)方法,在創(chuàng)建P1實例的時候相當于又重新拷貝了一個printName方法.
  • 方法二printName這個方法作為原型鏈方法,創(chuàng)建P1實例的時候相當于借用原型的printName方法.
    • 推薦使用第二種。方法2把通用的方法寫在原型對象中，每一個實例都能去引用該方法，節(jié)約了空間。

** 13、 Object.create 有什么作用？兼容性如何？ **####

  • Object.create() 方法它會把一個對象作為另一個對象的原型.可以通過Object.create方法實現(xiàn)繼承屬性。
    如：

    Male.prototype = Object.create(Person.prototype);

語法：Object.create(proto, [ propertiesObject ])
這是ES5的語法，支持ES5的瀏覽器才支持這么用。

** 14、hasOwnProperty有什么作用？ 如何使用？ **####

  • hasOwnPerperty是Object.prototype的一個方法，可以判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，hasOwnProperty是JavaScript中唯一 一個處理屬性但是不查找原型鏈的函數(shù)。
    • 用法：obj.hasOwnProperty(prop) // prop為要檢測的屬性
      function Person(name,age) {
      this.name = name;
      this.age = age;
      }
      Person.prototype.printName = function() {
      console.log(this.name);
      }
      function Man(name) {
      this.name = name;
      }
      Man.prototype = Object.create(Person.prototype);
      var p = new people('lulu');
      console.log(p.hasOwnProperty('printName'));//false

** 15、如下代碼中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;
}

使得Male的實例擁有Person的屬性，實現(xiàn)了繼承.

** 16、補全代碼，實現(xiàn)繼承 **####

              //實現(xiàn)繼承
                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.__proto__=Person.prototype; //方法二
                Male.prototype = new Person();  //方法三

                Male.prototype.getAge = function(){
                    console.log(this.age);
                };
                
                var ruoyu = new Male('leslie', '男', 27);
                ruoyu.getName();

學習提示
this 的值到底是什么？
JS 的 new 到底是干什么的？

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容