javascript之this

Taste 發(fā)布于2019-08-21 14:34 / 2363人閱讀

摘要：事件處理函數(shù)中的指向觸發(fā)事件的元素被調(diào)用時(shí)，將關(guān)聯(lián)的元素變成藍(lán)色總是當(dāng)和是同一個(gè)對(duì)象是為獲取文檔中的所有元素的列表將作為元素的點(diǎn)擊監(jiān)聽函數(shù)，當(dāng)元素被點(diǎn)擊時(shí)，就會(huì)變成藍(lán)色內(nèi)聯(lián)事件處理函數(shù)中的當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時(shí)，它的指向監(jiān)聽器所在的元素

MDN關(guān)于this的描述

全局上下文

在全局運(yùn)行上下文中（在任何函數(shù)體外部），this指代全局對(duì)象，無(wú)論是否在嚴(yán)格模式下

console.log(this.document === document);//true
console.log(this === window); //true
this.a = 22;
console.log(window.a); //22

函數(shù)上下文

在函數(shù)內(nèi)部，this的值取決于函數(shù)是如何調(diào)用的

直接調(diào)用

function f1() {
    return this;
}
f1() === window; //true
  
function f2() {
    "use strict";
    return this;
}
f2() === undefined; // true
在嚴(yán)格模式下，this是進(jìn)入運(yùn)行環(huán)境時(shí)設(shè)置的

對(duì)象方法中的this

var o = {
    prop: 22,
    f: function() {
        return this.prop;
    }
};
console.log(o.f());//22

原型鏈中的this

var o = {
    f: function(){
        return this.a + this.b;
    }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); //5

call和apply

通過(guò)call()和applly(),可以將this綁定在一個(gè)指定的對(duì)象上

function add(c,d){
    return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o,5,7);
add.apply(o,[5,7]);

bind方法

調(diào)用f.bind(someObject)會(huì)創(chuàng)建一個(gè)與f具有相同函數(shù)體和作用域的函數(shù)，但是在這個(gè)新函數(shù)中，this將永久地被綁定到了bind的第一個(gè)參數(shù)，無(wú)論這個(gè)函數(shù)是如何被調(diào)用的。

function f(){
    return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g());//azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g());//37 azerty

DOM事件處理函數(shù)中的this

this指向觸發(fā)事件的元素

// 被調(diào)用時(shí)，將關(guān)聯(lián)的元素變成藍(lán)色
function bluify(e){
  console.log(this === e.currentTarget); // 總是 true

  // 當(dāng) currentTarget 和 target 是同一個(gè)對(duì)象是為 true
  console.log(this === e.target);        
  this.style.backgroundColor = "#A5D9F3";
}

// 獲取文檔中的所有元素的列表
var elements = document.getElementsByTagName("*");

// 將bluify作為元素的點(diǎn)擊監(jiān)聽函數(shù)，當(dāng)元素被點(diǎn)擊時(shí)，就會(huì)變成藍(lán)色
for(var i=0 ; i
內(nèi)聯(lián)事件處理函數(shù)中的 this
當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時(shí)，它的this指向監(jiān)聽器所在的DOM元素：

云服務(wù)器 GPU云服務(wù)器 javascript的this javaScript中的this javascript中this詳解 this[]

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87947.html

相關(guān)文章

JavaScript深入之執(zhí)行上下文

摘要：深入系列第七篇，結(jié)合之前所講的四篇文章，以權(quán)威指南的為例，具體講解當(dāng)函數(shù)執(zhí)行的時(shí)候，執(zhí)行上下文棧變量對(duì)象作用域鏈?zhǔn)侨绾巫兓?。前言在深入之?zhí)行上下文棧中講到，當(dāng)代碼執(zhí)行一段可執(zhí)行代碼時(shí)，會(huì)創(chuàng)建對(duì)應(yīng)的執(zhí)行上下文。 JavaScript深入系列第七篇，結(jié)合之前所講的四篇文章，以權(quán)威指南的demo為例，具體講解當(dāng)函數(shù)執(zhí)行的時(shí)候，執(zhí)行上下文棧、變量對(duì)象、作用域鏈?zhǔn)侨绾巫兓摹?前言在《Jav...

gougoujiang 2019-08-20 15:46 評(píng)論0 收藏0
JavaScript深入之bind的模擬實(shí)現(xiàn)

摘要：也就是說(shuō)當(dāng)返回的函數(shù)作為構(gòu)造函數(shù)的時(shí)候，時(shí)指定的值會(huì)失效，但傳入的參數(shù)依然生效。構(gòu)造函數(shù)效果的優(yōu)化實(shí)現(xiàn)但是在這個(gè)寫法中，我們直接將，我們直接修改的時(shí)候，也會(huì)直接修改函數(shù)的。 JavaScript深入系列第十一篇，通過(guò)bind函數(shù)的模擬實(shí)現(xiàn)，帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會(huì)創(chuàng)建一個(gè)新函數(shù)。當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)，bind() 的第一個(gè)參數(shù)...

FingerLiu 2019-08-20 16:15 評(píng)論0 收藏0
JavaScript深入之new的模擬實(shí)現(xiàn)

摘要：深入系列第十二篇，通過(guò)的模擬實(shí)現(xiàn)，帶大家揭開使用獲得構(gòu)造函數(shù)實(shí)例的真相一句話介紹運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象類型之一也許有點(diǎn)難懂，我們?cè)谀M之前，先看看實(shí)現(xiàn)了哪些功能。 JavaScript深入系列第十二篇，通過(guò)new的模擬實(shí)現(xiàn)，帶大家揭開使用new獲得構(gòu)造函數(shù)實(shí)例的真相 new 一句話介紹 new: new 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具...

tianlai 2019-08-20 16:17 評(píng)論0 收藏0
JavaScript深入之繼承的多種方式和優(yōu)缺點(diǎn)

摘要：深入系列第十五篇，講解各種繼承方式和優(yōu)缺點(diǎn)。優(yōu)點(diǎn)融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)，是中最常用的繼承模式。寄生組合式繼承為了方便大家閱讀，在這里重復(fù)一下組合繼承的代碼組合繼承最大的缺點(diǎn)是會(huì)調(diào)用兩次父構(gòu)造函數(shù)。 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。寫在前面本文講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。但是注意：這篇文章更像是筆記，哎...

JackJiang 2019-08-20 16:30 評(píng)論0 收藏0
學(xué)習(xí)JavaScript之this,call,apply

摘要：在全局對(duì)象中調(diào)用，自然讀取的是全局對(duì)象的值構(gòu)造器調(diào)用說(shuō)明作為構(gòu)造器調(diào)用時(shí)，指向返回的這個(gè)對(duì)象。最直觀的表現(xiàn)就是，去看一些優(yōu)秀框架的源代碼時(shí)，不再是被繞的暈乎乎的。學(xué)習(xí)起因：在之前的JavaScript學(xué)習(xí)中，this,call,apply總是讓我感到迷惑，但是他們的運(yùn)用又非常的廣泛。遂專門花了一天，來(lái)弄懂JavaScript的this,call,apply。中途參考的書籍也很多，以...

wenhai.he 2019-08-19 17:30 評(píng)論0 收藏0
JavaScript深入之創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)

摘要：深入系列第十四篇，講解創(chuàng)建對(duì)象的各種方式，以及優(yōu)缺點(diǎn)。也就是說(shuō)打著構(gòu)造函數(shù)的幌子掛羊頭賣狗肉，你看創(chuàng)建的實(shí)例使用都無(wú)法指向構(gòu)造函數(shù)這樣方法可以在特殊情況下使用。 JavaScript深入系列第十四篇，講解創(chuàng)建對(duì)象的各種方式，以及優(yōu)缺點(diǎn)。寫在前面這篇文章講解創(chuàng)建對(duì)象的各種方式，以及優(yōu)缺點(diǎn)。但是注意：這篇文章更像是筆記，因?yàn)椤禞avaScript高級(jí)程序設(shè)計(jì)》寫得真是太好了！ 1....

Terry_Tai 2019-08-21 11:40 評(píng)論0 收藏0