javascript之this

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

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

MDN關于this的描述

全局上下文

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

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
在嚴格模式下，this是進入運行環(huán)境時設置的

對象方法中的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

通過call()和applly(),可以將this綁定在一個指定的對象上

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)會創(chuàng)建一個與f具有相同函數(shù)體和作用域的函數(shù)，但是在這個新函數(shù)中，this將永久地被綁定到了bind的第一個參數(shù)，無論這個函數(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)用時，將關聯(lián)的元素變成藍色
function bluify(e){
  console.log(this === e.currentTarget); // 總是 true

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

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

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

GPU云服務器云服務器 javascript的this javaScript中的this javascript中this詳解 this[]

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

轉載請注明本文地址：http://systransis.cn/yun/87947.html

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

摘要：深入系列第七篇，結合之前所講的四篇文章，以權威指南的為例，具體講解當函數(shù)執(zhí)行的時候，執(zhí)行上下文棧變量對象作用域鏈是如何變化的。前言在深入之執(zhí)行上下文棧中講到，當代碼執(zhí)行一段可執(zhí)行代碼時，會創(chuàng)建對應的執(zhí)行上下文。 JavaScript深入系列第七篇，結合之前所講的四篇文章，以權威指南的demo為例，具體講解當函數(shù)執(zhí)行的時候，執(zhí)行上下文棧、變量對象、作用域鏈是如何變化的。前言在《Jav...

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

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

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

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

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

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

JackJiang 2019-08-20 16:30 評論0 收藏0
學習JavaScript之this,call,apply

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

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

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

Terry_Tai 2019-08-21 11:40 評論0 收藏0