javascript之this

Taste 發布于2019-08-21 14:34 / 2326人閱讀

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

MDN關于this的描述

全局上下文

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

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

函數上下文

在函數內部，this的值取決于函數是如何調用的

直接調用

function f1() {
    return this;
}
f1() === window; //true
  
function f2() {
    "use strict";
    return this;
}
f2() === undefined; // true
在嚴格模式下，this是進入運行環境時設置的

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

調用f.bind(someObject)會創建一個與f具有相同函數體和作用域的函數，但是在這個新函數中，this將永久地被綁定到了bind的第一個參數，無論這個函數是如何被調用的。

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事件處理函數中的this

this指向觸發事件的元素

// 被調用時，將關聯的元素變成藍色
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作為元素的點擊監聽函數，當元素被點擊時，就會變成藍色
for(var i=0 ; i
內聯事件處理函數中的 this
當代碼被內聯處理函數調用時，它的this指向監聽器所在的DOM元素：

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

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

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

JavaScript深入之執行上下文

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

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

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

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

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

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

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

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

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

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

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

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