資訊專欄INFORMATION COLUMN
摘要：再來(lái)看一個(gè)小的示例淘寶騰訊淘寶為什么輸出的依然是淘寶呢調(diào)用的是對(duì)象中的方法，方法里面有一個(gè)定時(shí)器，而定時(shí)器的一個(gè)參數(shù)是這里的指的就是的對(duì)象，然后方法里面有調(diào)用了，但是定時(shí)器中的指的是對(duì)象，所以最終調(diào)用的是對(duì)象中。
1.看前熱身
看一段代碼
上面的這段代碼中 obj是JavaScript中的對(duì)象類型，對(duì)象就是屬性和方法的集合。
如果執(zhí)行obj.foo()函數(shù)的話，在控制臺(tái)輸出js。
其實(shí)this的定義就是，他是js對(duì)象中的一個(gè)特殊指針，他的指向根據(jù)環(huán)境的不同而發(fā)生改變。
this的指向：誰(shuí)調(diào)用或者哪個(gè)對(duì)象調(diào)用this所在的函數(shù)，this就指向誰(shuí)。
構(gòu)造函數(shù)的this和普通函數(shù)的this指向
構(gòu)造函數(shù)的this
//構(gòu)造函數(shù)和普通函數(shù)的this指向
var name = "淘寶";
//構(gòu)造函數(shù)
function Foo() {
this.name = "騰訊";
this.aa = function () {
console.log(this.name);
} ;
}
// 實(shí)例化對(duì)象
var obj = new Foo();
obj.aa();//騰訊
普通函數(shù)的this
var name = "淘寶";
function foo() {
var name = "騰訊";
console.log(this.name);
}
foo(); //淘寶
在普通函數(shù)中，this指的是window對(duì)象，所以在這里輸出的依然是‘淘寶’;
更深的一個(gè)函數(shù)的this
var name = "淘寶";
function Foo() {
this.name = "騰訊";
this.foo = function () {
var name = "百度";
return function () {
console.log(this.name);
}
}
}
var obj = new Foo();
obj.foo()();//淘寶
這個(gè)函數(shù)this的指向依然是window
3.定時(shí)器中的this指向// 定時(shí)器中的this
var name = "淘寶";
function foo() {
var name = "騰訊";
console.log(this.name);
}
// 定時(shí)器
setTimeout(foo,1000) //淘寶
由此小案例可以看出 定時(shí)器中的this指的是window對(duì)象。
再來(lái)看一個(gè)小的示例
var name = "淘寶";
var obj = {
name :"騰訊",
fn:function () {
console.log(this.name);
},
foo:function () {
setTimeout(this.fn,1000);
}
};
obj.foo();//淘寶
為什么輸出的依然是淘寶呢？
obj.foo()調(diào)用的是obj對(duì)象中的foo()方法，foo()方法里面有一個(gè)定時(shí)器，而定時(shí)器的一個(gè)參數(shù)是this.fn,這里的this指的就是obj的對(duì)象，然后fn()方法里面有調(diào)用了this.name，但是定時(shí)器中的this指的是window對(duì)象，所以最終this.name調(diào)用的是window對(duì)象中name。
在上面的示例中，把輸出的‘淘寶’改成‘騰訊’
var name = "淘寶";
var obj = {
name :"騰訊",
fn:function () {
console.log(this.name);
},
foo:function () {
// setTimeout(this.fn.call(obj),1000);
setTimeout(this.fn.bind(obj),1000);
}
};
obj.foo();//騰訊
在this調(diào)用的時(shí)候添加bind或者call強(qiáng)制改變this的指向，在這里，指向了obj，所以輸出的是obj.name，為‘騰訊’。
4.箭頭函數(shù)的this示例
var author = "lzz";
var book = {
author:"ql",
init:function () {
setTimeout(ev => {
console.log(this.author);
},1000);
}
};
book.init();
箭頭函數(shù)的特征就是定義在哪，this的指向在那。就是箭頭函數(shù)定義在一個(gè)對(duì)象里面，那么箭頭函數(shù)里面的this就指向該對(duì)象。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92640.html
摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及，但是只要善于運(yùn)用，其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對(duì)方法，包括，，。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸?，因此文中只看懂?8 成左右，希望能夠給大家?guī)?lái)幫助....（據(jù)說(shuō)是阿里的前端妹子寫的） this 的值到底...
摘要：響應(yīng)某個(gè)事件的函數(shù)就叫事件處理程序或事件偵聽器。為事件指定事件處理程序的方法主要有種。事件處理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，觸發(fā)執(zhí)行效果，解決事件處理程序過(guò)多問(wèn)題。事件委托優(yōu)點(diǎn)提高性能。 JavaScript簡(jiǎn)單入門可以看看我丑丑的Github博客JavaScript簡(jiǎn)單入門 事件 JavaScript與HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的...
摘要：第四點(diǎn)也要著重講下，記住構(gòu)造函數(shù)被操作，要讓正常作用最好不能在構(gòu)造函數(shù)里 4) this、new、call和apply的相關(guān)問(wèn)題 講解this指針的原理是個(gè)很復(fù)雜的問(wèn)題，如果我們從javascript里this的實(shí)現(xiàn)機(jī)制來(lái)說(shuō)明this，很多朋友可能會(huì)越來(lái)越糊涂，因此本篇打算換一個(gè)思路從應(yīng)用的角度來(lái)講解this指針，從這個(gè)角度理解this指針更加有現(xiàn)實(shí)意義。 下面我們看看在ja...
摘要：另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。因?yàn)橹稻哂形ㄒ恍?，這就意味著作為對(duì)象的屬性名時(shí)，可以保證不會(huì)出現(xiàn)同名的屬性。不過(guò)，這個(gè)提議在中被拒絕了，也許之后的版本會(huì)再考慮。事實(shí)上，與都有語(yǔ)法解決構(gòu)造器中屬性名重復(fù)的問(wèn)題。 譯者按: 這篇博客將介紹ES6新增的Object.assign()方法。 原文: ECMAScript 6: merging objects via Object...
介紹 在創(chuàng)建對(duì)象的時(shí)候，我們有2種常用方法 一個(gè)是文本標(biāo)記法(var obj = {}),一種是運(yùn)用Object函數(shù)進(jìn)行對(duì)象的創(chuàng)建(new Object()). 但是這兩種方式并不是創(chuàng)建的一個(gè)完完全全干干凈凈的對(duì)象,這里的干凈只得是沒有繼承鏈. 幸運(yùn)的是，ES5為我們提供了一種創(chuàng)建完全干凈的對(duì)象的方法，Object.create函數(shù),接下我將向大家介紹Obje...
閱讀 3873·2021-10-08 10:12
閱讀 4441·2021-09-02 15:40
閱讀 962·2021-09-01 11:09
閱讀 1616·2021-08-31 09:38
閱讀 2551·2019-08-30 13:54
閱讀 2259·2019-08-30 12:54
閱讀 1253·2019-08-30 11:18
閱讀 1411·2019-08-29 14:06
