面向對象基礎二（原型鏈和原型）

人生就像一列開往墳墓的列車，路途上會有很多站，很難有人至始至終陪你走完全程，當陪你的人要下車時，即便不舍，也要心存感激，然后揮手告別。---sunnyhuang

字符串問題

問題1：** apply、call 、bind有什么作用，什么區別

bind:創建一個新函數，當這個函數被調用的時候，第一個參數作為this值，之后的參數作為實參傳入到新函數中。

call:調用函數，并指定這個函數的this和傳入的若干個參數值。

apply:指定this值和以數組形式傳遞參數的情況下調用函數。

作用: 從它們的用法中可以看出，改變this，傳遞參數。

區別:首先是call和bind的區別，call是調用函數，返回的是函數的返回值，而bind是創建一個新函數，就像是復制了別人的軀殼，改變了內在，然后作為一個新東西使用。然后call和apply的區別是，傳遞的實參不一樣，call是單個傳遞，而apply是以數組的形式傳遞。

    var name="window"
    function Student(age){
        this.age=age
        this.name="student";
        this.say=function(){
            console.log(this.name);
            console.log(this.age);
        }
    }
    var fn1=new Student(22)
    fn1.say()
    var say1=fn1.say.call(window)
    // say1  undefined
    var fn2=new Student()
    var say2=fn2.say.bind(Student)
    //say2  function
    say2()

問題2： 以下代碼輸出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//轉換這個代碼的執行函數
//john.sayHi.call(john)
//所以輸出'John: hi!'

問題3： 下面代碼輸出什么，為什么

func() //window
function func() { 
  alert(this)
}
//轉化這個代碼的執行函數
//func.call(null) 在默認情況下，call中傳遞的是null,undefined的時候，this指向window
//所以call的第一值就是this，也就是window

問題4：下面代碼輸出什么

document.addEventListener('click', function(e){
    console.log(this); //document
    setTimeout(function(){
        console.log(this); //window
    }, 200);
}, false);
//這里考察2個點 1. setTimeout的默認this值是window 2.事件處理程序中的this就是事件源DOM對象

問題5：下面代碼輸出什么，why

var john = { 
  firstName: "John" 
}
function func() { 
  alert( this.firstName )
}
func.call(john)  //John
//1. 由于call調用函數第一個值傳遞的是this
//2. 所以func函數的調用的this的值就是john

問題6： 以下代碼有什么問題，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么  這里的this指的是#btn
      this.showMsg();//這里的this指的是#btn
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}
//this的指向出現了問題，事件監聽函數中的this指向事件源，但是事件源沒有showMsg()這個方法
//修改1
  bind: function(){
    var _this=this
    $btn.on('click', function(){
      _this.showMsg();
    })
  },
//修改2
  bind: function(){
    var _this=this
    $btn.on('click', function(){
        module.showMsg.bind(module)()
        //module.showMsg.call(module)
    })
  },

原型鏈問題

問題7：有如下代碼，解釋Person、 prototype、__proto__、p、constructor之間的關聯。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
  1. 首先明白，對于函數先研究原型prototype,對于對象研究__proto__原型鏈
  2. __proto__指向的是一個構造函數的原型，constructor指向的是對應的構造函數
  3. 因為所有函數都是由Function創建的，所以Function.prototype===被創建函數.proto
  4. 一切函數的原型對象都是由Object函數創建的，所以Function.prototype.proto都指向Object的prototype屬性。

解析

  • Person是構造函數，p是Person生成的實例。每一個函數在聲明的時候同時會有一個prototype屬性(是一個對象)。

  • Person.prototype.constructor === Person 構造函數的原型的constructor的屬性指向相應的構造函數

  • p.__ proto __= Person.prototype 實例化的對象的__ proto__屬性，指向構造函數的原型（這里想new到底做了什么）

    ?

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

原型鏈.png

有上圖可以看出:對象p是沒有toString()方法,所以它必須通過proto像上級尋找是否有toString()方法，發現Person.prototype里面也沒有toString()方法，所以Person.prototype必須又向上級尋找，在Object.prototype中找到了toString()方法。像這樣的通過proto不斷的尋找屬性和方法，就是原型鏈，在自己的作用域中找到了就不會繼續想上尋找了。

問題9：對String做擴展，實現如下方式獲取字符串中頻率最高的字符

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

    String.prototype.getMostOften=function(){
        var obj={}
        //遍歷字符串
        for(let i=0;i<this.length;i++){
            if(!obj[this[i]]){
                obj[this.charAt(i)]=1;
            }
            else if(obj[this[i]]){
                obj[this.charAt(i)]++
            }
        }
        //console.log(obj)
        //遍歷這個對象的值
        var max=0,val; //假定一個最大值
        for(var key in obj){
            if(obj[key]>max){
                max=obj[key];
                val=key;

            }
        }
        return val;
    }
    var str = 'foajfljadlfjlajfl';
    var ch= str.getMostOften();
    console.log(ch)

問題10： instanceof有什么作用？內部邏輯是如何實現的？

記住instanceof是作用于對象的，看看一個實例化的對象在其原型鏈上存不存在一個構造函數的原型。

object(對象) instanceof constructor(一個構造函數)

內部邏輯:首先明白1. 每一個對象都一個__proto__屬性值指向創建它的構造函數。2.通過__proto__原型鏈會不斷的向上尋找，直到找到目標為止。3. 所有對象都是通過Object對象實例化而成。

function Person(){}
var p=new Person()
p instanceof Person   //true    因為p.__proto__===Person.prototype
p instanceof Object  //true 
Person.prototype={}  //重寫原型
p instanceof Person  //false  由于原型的重寫，它還是指向原來的，而此時已經不是Person的原型了

繼承相關問題

問題11：繼承有什么作用?

繼承的作用：

  1. 減少代碼的量，實現復用代碼。
  2. 可以充分的理解面向對象的基礎

問題12： 下面兩種寫法有什么區別?

//方法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. 想想第一種寫法，我們如果創建100個實例對象，是不是每一個對象都會有printName這個方法。

  2. 但是有時候，不是所有對象都需要這個方法，這就加大了內存的負擔。

  3. 如果我們按照第二種方法構造函數，就能夠做到，誰想用就用，不用就可以不用，只有一條代碼。

  4. 這二種的結構都不一樣，生成的實例對象擁有的屬性和方法都不一樣。

    總結

    1. 公共的屬性和方法就放在構造函數中
    2. 有的需要有的不需要就放在構造函數的原型中
    3. 方法到底是放在原型中還是構造函數中，是根據需要和結構而定

問題13： Object.create 有什么作用？兼容性如何？

創建一個指定原型的對象，也可以添加相應屬性。

通常用于繼承，給一個對象的原型創建一個proto指向它的父類的原型，從而實現繼承

支持ie9以上(包括ie9)，其他主流瀏覽器

function Parent(name,age){
  this.name=name;
  this.age=age;
}
Parent.prototype.say=function(){console.log("my name is "+this.name)}
function Child(name,age,sex){
  Parent.call(this,name,age); //繼承屬性
  this.sex=sex;
}
Child.prototype=Object.create(Parent.prototype)   //這里重寫了Child的原型，并指定了Child.prototype的__proto__指向Parent.prototype
Child.prototype.walking=function(){console.log(this.sex)}
Child.prototype.constructor=Child;  //手動指定構造函數
var c=new Child("hcc",24,"男")

問題14： hasOwnProperty有什么作用？ 如何使用？

我們知道有些屬性是通過原型鏈獲得的，不一定都是自己的，所以急需要一個方法來判定是不是屬于我們的

Object.prototype.hasOwnProperty()判定一個屬性是不是屬于這個對象本身

var obj={
  name:"hcc",
  age:24,
  say:function(){}
}
obj.hasOwnProperty('name')  //true
obj.hasOwnProperty('say')  //true
obj.hasOwnProperty('toString')  //false
obj.hasOwnProperty('hasOwnProperty' )  //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;
}

Person.call(this, name, sex); //這里的 call 有什么作用

  1. 調用Person這個函數

  2. 改變Person里面的this作用域

  3. 傳遞erson這個函數需要的相應參數

    所以這里變相的實現了Male繼承了Person的屬性

問題16： 補全代碼，實現繼承

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

function Person(name, sex){
    this.name=name;
    this.sex=sex;
}
Person.prototype.getName = function(){
    return "my name is "+ 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(){
   return "my age is "+ this.age
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容