夯實(shí)JS基礎(chǔ)（一）：this的指向問題和經(jīng)典面試題

lucas 發(fā)布于2019-08-26 10:29 / 3294人閱讀

摘要：很多高級(jí)編程語言都給新創(chuàng)建的對(duì)象分配一個(gè)引用自身的指針比如中的指針，中的，也有指針，雖然它的指向可能相對(duì)復(fù)雜些，但是指向的，永遠(yuǎn)只可能是對(duì)象。

很多高級(jí)編程語言都給新創(chuàng)建的對(duì)象分配一個(gè)引用自身的指針,比如JAVA、C++中的this指針，python中的self，JavaScript也有this指針，雖然它的指向可能相對(duì)復(fù)雜些，但是this指向的，永遠(yuǎn)只可能是對(duì)象。

一、在一般函數(shù)方法中使用 this 指代全局對(duì)象

function test(){
　  this.x = 1
　　console.log(this.x)
}
test()  // 1

二、.作為對(duì)象方法調(diào)用，this 指代上級(jí)對(duì)象，數(shù)組同理

var obj = {
    name:"obj",
    func1 : function() {
        console.log(this)
    }
}
obj.func1()  // this--->obj

document.getElementById("div").onclick = function(){
   console.log(this)
}; // this--->div

三、函數(shù)作為window內(nèi)置函數(shù)的回調(diào)函數(shù)調(diào)用：this指向window對(duì)象（setInterval、setTimeout 等）

window.setInterval(function(){
  console.log(this)
}, 300)

四、作為構(gòu)造函數(shù)調(diào)用，this 指代 new 實(shí)例化的對(duì)象

function test(){
　　this.x = 1
}
var o = new test()
alert(o.x)  // 1

五、apply、call、bind改變函數(shù)的調(diào)用對(duì)象，此方法的第一個(gè)參數(shù)為改變后調(diào)用這個(gè)函數(shù)的對(duì)象

var x = 0;
function test(){
　　console.log(this.x)
}
var obj = {}
obj.x = 1
obj.m = test
obj.m.apply() //0，apply()的參數(shù)為空時(shí)，默認(rèn)調(diào)用全局對(duì)象
obj.m.apply(obj); //1

六、匿名函數(shù)的執(zhí)行環(huán)境具有全局性，this對(duì)象通常指向window對(duì)象

var name = "The Window";
var obj = {
    name: "My obj",
    getName: function() {
        return function() {
            console.log(this.name);
        };
    }
};

obj.getName()(); // "The Window"

紙上得來終覺淺，絕知此事要躬行，一起動(dòng)手刷一下this的經(jīng)典面試題吧

var x = 3;
var y = 4;
var obj = {
    x: 1,
    y: 6,
    getX: function() {
        var x =5;
        return function() {
            return this.x;
        }();
    },
    getY: function() {
        var y =7;
         return this.y;
    }
}
console.log(obj.getX())//3
console.log(obj.getY())//6

 var name="the window";

 var object={
    name:"My Object", 
    getName:function(){ 
       return this.name;
   } 
 }

 object.getName();   //"My Object"

(object.getName)();   //"My Object"

(object.getName=object.getName)();   //"the window"，函數(shù)賦值會(huì)改變內(nèi)部this的指向，這也是為什么需要在 React 類組件中為事件處理程序綁定this的原因;

 var a=10; 
 var obt={ 
   a:20, 
   fn:function(){ 
     var a=30; 
     console.log(this.a)
   } 
 }
 obt.fn();  // 20

 obt.fn.call(); // 10

 (obt.fn)(); // 20

 (obt.fn,obt.fn)(); // 10

 new obt.fn(); // undefined

function a(xx){
  this.x = xx;
  return this
};
var x = a(5);
var y = a(6);

console.log(x.x)  // undefined
console.log(y.x)  // 6

<題目持續(xù)更新中...>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/106262.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lucas

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Vue+thinkJs博客網(wǎng)站（二）之thinkJs的使用

閱讀 954·2019-08-30 15:55
node.js命令行教程

閱讀 550·2019-08-26 13:56
Vue一個(gè)案例引發(fā)的遞歸組件的使用

閱讀 2079·2019-08-26 12:23
夯實(shí)JS基礎(chǔ)（一）：this的指向問題和經(jīng)典面試題

閱讀 3295·2019-08-26 10:29
標(biāo)準(zhǔn)庫（四）包裝對(duì)象二number

閱讀 600·2019-08-26 10:17
fe4-3:遞歸

閱讀 2867·2019-08-23 16:53
一文學(xué)懂 TypeScript 的類型

閱讀 696·2019-08-23 15:55
lodop打印控件的使用

閱讀 2813·2019-08-23 14:25

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

夯實(shí)JS基礎(chǔ)（一）：this的指向問題和經(jīng)典面試題

相關(guān)文章