this 相關問題

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

1. call()

var a = {
    user:"小學生",
    fn:function(){
        console.log(this.user);  //小學生
    }
}
var b = a.fn;
b.call(a);

通過在call方法，可以改變函數的執行上下文，簡單的說就是改變this值的指向對象

call方法除了第一個參數以外還可以添加多個參數，如下：

var a = {
    user:"小學生",
    fn:function(a, b){
        console.log(this.user); //小學生
        console.log(a+b); //3
    }
}
var b = a.fn;
b.call(a,1,2);

2. apply()

apply方法和call方法有些相似，它也可以改變this的指向

var a = {
    user:"小學生",
    fn:function(){
        console.log(this.user); //小學生
    }
}
var b = a.fn;
b.apply(a);

同樣apply也可以有多個參數，但是不同的是，第二個參數必須是一個數組，如下：

var a = {
    user:"小學生",
    fn:function(a, b){
        console.log(this.user); //小學生
        console.log(a+b); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

或者

var a = {
    user:"小學生",
    fn:function(a, b){
        console.log(this.user); //小學生
        console.log(a+b); //11
    }
}
var b = a.fn;
var arr = [1,10]
b.apply(a, arr);

//注意如果call和apply的第一個參數寫的是null，那么this指向的是window對象

var a = {
    user:"小學生",
    fn:function(){
        console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
    }
}
var b = a.fn;
b.apply(null);

3. bind()

bind方法和call、apply方法有些不同，但是不管怎么說它們都可以用來改變this的指向。

先來說說它們的不同吧。

var a = {
    user:"小學生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);

我們發現代碼沒有被打印，對，這就是bind和call、apply方法的不同，實際上bind方法返回的是一個修改過后的函數。

var a = {
    user:"小學生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }

那么我們現在執行一下函數c看看，能不能打印出對象a里面的user

var a = {
    user:"小學生",
    fn:function(){
        console.log(this.user); //小學生
    }
}
var b = a.fn;
var c = b.bind(a);
c();

ok，同樣bind也可以有多個參數，并且參數可以執行的時候再次添加，但是要注意的是，參數是按照形參的順序進行的。

var a = {
    user:"小學生",
    fn:function(e,d,f){
        console.log(this.user); //小學生
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

總結：call和apply都是改變上下文中的this并立即執行這個函數，bind方法可以讓對應的函數想什么時候調就什么時候調用，并且可以將參數在執行的時候添加，這是它們的區別，根據自己的實際情況來選擇使用。

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

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//出現彈窗顯示 john: hi!
this指向調用sayHi()的john對象

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

func() 
function func() { 
  alert(this)
}
// 彈窗顯示[object Window] 
因為在func函數里這個this 指向全局對象 window

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

document.addEventListener('click', function(e){
    console.log(this);            //輸出document, 在事件處理程序中this代表事件源DOM對象
    setTimeout(function(){
        console.log(this);       //輸出window, setTimeout和setInterval執行的函數this是全局對象
    }, 200);
}, false);

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

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
// 彈窗顯示 John
call 方法改變了 this的指向，使this指向對象john

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //這里的this指$btn
      this.showMsg();  //$btn上沒有showMsg()這個方法
    })
  },

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

修改后：
var module= {
  bind: function(){
     var that = this                  // 緩存指向modeule對象的this
    $btn.on('click', function(){
      console.log(this) //這里的this指$btn
      that.showMsg();  //that指向modeule ，modeule上有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 是函數定義的類，類（函數）會自動獲得屬性prototype。
p是Person 的實例，每個實例都有一個內部屬性 __proto__， __proto__指向構造這個實例的對象的 prototype屬性。
prototype是構造函數內部的原型對象，所以擁有 contructor和 __proto__屬性。constructor指向了構造函數Person。

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

當調用 p.tostring() 時, 先會在 p 里找 tostring 方法, 找不到會沿著 __proto__ 到 Person.prototype 中找,還找不到就接著沿著 __proto__ 找, 直到在 object.prototype 中找到為止
p.__proto__ ==> Person.prototype.__proto__ ==> object.prototype

原型鏈：
p.toString()方法，先從p的屬性里面找，沒有，
再從p.proto中找，還是沒有
再從p.proto.proto中找，找到了，
這樣沿著proto這個鏈子一路找下去，就是原型鏈

image.png

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

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

代碼如下：

String.prototype.getMostOften = function() {
    var obj = {}, char;
    for(var i=0; i<this.length; i++) {
        char = this[i];
        if(obj[char]) {
            obj[char]++;
        }else {
            obj[char] = 1; 
        }
    }
    var maxchar = "", max = 0;
    for ( var key in obj) {
        if(obj[key] > max) {
            max = obj[key];                  // 始終保持最大值
            maxchar = key;
        }
    }
    return maxchar;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現了5次

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

概述

instanceof運算符用來判斷一個構造函數的prototype屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上

語法

obj instanceof Object;//true 實例obj在不在Object構造函數中

舉個例子:

模擬 A instanceof B

function _instanceof(A, B) {
    var O = B.prototype;// 取B的顯示原型
    A = A.__proto__;// 取A的隱式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (A === null)
            return false;
        if (O === A)// 這里重點：當 O 嚴格等于 A 時，返回 true
            return true;
        A = A.__proto__;
    }
}

繼承相關問題

問題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** 方法。
區別是方法一是在** Person** 的實例對象里創建 ** printName** 方法，這樣每創建一個新的實例都會有一個新的 ** printName** 方法。
方法二是在** Person ** 的原型鏈上創建 ** printName** 方法，這樣每一個實例只需要調用原型鏈上的方法，比較節約內存。

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

Object.create() 方法使用指定的原型對象和其屬性創建了一個新的對象。

child = Object.create(parent.prototype)
不使用Object.create的方法
function fn(){}
chlid.prototype = new fn();
fn.prototype = parent.prototype;

image.png

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

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

obj.hasOwnProperty(prop)
//prop : 要檢查的屬性名
//obj: 要檢查的對象
//返回一個布爾值

問題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); 使函數Person 的 this 指向 Male ，然后執行函數使 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.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.printName = function (){
    console.log(this.name);
}
Male.prototype.getAge = function(){
    console.log(this.age);
};

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

JS_this_原型鏈_繼承

JS_this_原型鏈_繼承

this 相關問題

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

1. call()

2. apply()

3. bind()

總結：call和apply都是改變上下文中的this并立即執行這個函數，bind方法可以讓對應的函數想什么時候調就什么時候調用，并且可以將參數在執行的時候添加，這是它們的區別，根據自己的實際情況來選擇使用。

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

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

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

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

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

原型鏈相關問題

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

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

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

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

概述

語法

舉個例子:

繼承相關問題

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

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

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

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

問題15：如下代碼中call的作用是什么?

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

補全后

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JS_this_原型鏈_繼承

this 相關問題

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

1. call()

2. apply()

3. bind()

總結：call和apply都是改變上下文中的this并立即執行這個函數，bind方法可以讓對應的函數想什么時候調就什么時候調用，并且可以將參數在執行的時候添加，這是它們的區別，根據自己的實際情況來選擇使用。

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

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

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

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

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

原型鏈相關問題

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

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

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

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

概述

語法

舉個例子:

繼承相關問題

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

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

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

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

問題15：如下代碼中call的作用是什么?

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

補全后

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

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

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

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

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

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

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

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