this 相關問題

1.apply、call 、bind有什么作用，什么區別

apply()方法調用一個函數, 其具有一個指定的this值，以及作為一個數組（或類似數組的對象）提供的參數

fn.apply(thisArg, [argsArray])

call() 方法調用一個函數, 其具有一個指定的this值和分別地提供的參數(參數的列表)。

fn.call(thisArg[, arg1[, arg2[, ...]]])

bind()方法創建一個 新的函數 , 當被調用時，將其this關鍵字設置為提供的值，在調用新函數時，在任何提供之前提供一個給定的參數序列。

fn.bind(thisArg[, arg1[, arg2[, ...]]])

三者都是函數調用方法，其中apply call除了參數不一樣外，call的性能明顯優于apply。它們都返回this調用的結果, 而bind返回新函數

2.以下代碼輸出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()//彈出窗口，內容為John：hi！

3. 下面代碼輸出什么，為什么

func() 
function func() { 
  alert(this)
} //彈出窗口為window對象，this為全局作用于調用

4.下面代碼輸出什么

document.addEventListener('click', function(e){
    console.log(this);//document 
    setTimeout(function(){
        console.log(this);//window
    }, 200);
}, false);

5.下面代碼輸出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)//彈出窗口，內容為John。因為調用call()，func里的this指向john對象

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指$btn
      this.showMsg();//因為這里this指向$btn,直接使用this獲取不到showMsg()  
  })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

修改：

var module= {
  bind: function(){
var self =this //申明個變量保存指向這個方法對象
    $btn.on('click', function(){
      console.log(this) //this指$btn
      self.showMsg();
  })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

原型鏈相關問題

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();
//Person為一個構造函數，p為Person的一個實例，他們擁有共同的原型prototype。
Person.prototype.constructor === Person;
p.__proto__ === Person.prototype;
Person.prototype.__proto__ === Object.prototype;
Person.__proto__ === Function.prototype

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

p先從自己私有屬性找，沒找到，來到Person.prototype找，沒找到，因為任何類的 prototype 屬性本質上都是個類 Object 的實例，所以繼續在Person.prototype.___proto____也就是Object.prototype里找，然后就找到了toString()方法。

原型圖

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

        var str = 'ahbbccdeddddfg';
        String.prototype.getMostOften = function () {
            var dict = {};
            for (var i = 0; i < this.length; i++) {
                if (dict[this[i]]) {
                    dict[this[i]]++
                } else {
                    dict[this[i]] = 1
                }
            }
            //console.log(dict)
            var dictMax;
            var dictNum = 0;
            for (var key in dict) {
                console.log(key)
                if (dict[key] > dictNum) {
                    dictMax = key
                    dictNum = dict[key]
                }
            }
            return dictMax
        }
        var ch = str.getMostOften();
        console.log(ch); //d , 因為d 出現了5次

10.instanceOf有什么作用？內部邏輯是如何實現的？

instanceOf判斷一個對象是不是某個類型的實例

//邏輯實現
person1 instanceof Person
能否通過person1的原型鏈找到Person.prototype

繼承相關問題

11.繼承有什么作用?

繼承是面向對象的核心，能夠更有效的組織代碼與邏輯，繼承可以減少重復的代碼，把公用的方法屬性放在父類，子類可以直接使用，并且子類也可以很方便擴展添加新的方法或者屬性，不會影響到父類。提高復用，減少代碼冗余。

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);

方法一：printName為實例屬性，每次實例創建都要創建各自的printName。
方法二：printName為原型的中的屬性，只需創建一次，被所有創建的實例共享，通過原型鏈訪問。

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

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

通過Object.create clone了一個新的prototype而不是直接把Person.prtotype直接賦值，因為引用關系，這樣會導致后續修改子類的prototype也修改了父類的prototype，因為修改的是一個值
兼容性：Object.create是ES5方法，IE9及以上支持, 兼容性良好

14.hasOwnProperty有什么作用？ 如何使用？

hasOwnPerperty是Object.prototype的一個方法，可以判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，hasOwnProperty是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數

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

Person.prototype.printName = function(){
    console.log(this.name);
}
var p = new Person('jirengu');
p.hasOwnPrototype("name")//true,存在于實例屬性；
p.hasOwnPrototype("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;
}

call的作用把Person的屬性繼承給Male，this指向Male。

16. 補全代碼，實現繼承

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

        Person.prototype.getName = function () {
            console.log("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.getAge = function () {
            console.log("My age is " + this.age);
        };

        var ruoyu = new Male('若愚', '男', 27);
        ruoyu.getName();//My name is 若愚
        ruoyu.getAge();// My age is 27