摘要:原文地址基礎心法歡迎。作為一個構造函數被綁定到正在構造的新對象。通過構造函數創建一個對象其實執行這樣幾個步驟創建新對象將指向這個對象給對象賦值屬性方法返回所以就是指向創建的這個對象上。
原文地址:JavaScript基礎心法——this
歡迎star。
如果有錯誤的地方歡迎指正。
看看這個有著深不可測的魔力的this到底是個什么玩意兒 ~
什么是this在傳統面向對象的語言中,比如Java,this關鍵字用來表示當前對象本身,或當前對象的一個實例,通過this關鍵字可以獲得當前對象的屬性和調用方法。
在JavaScript中,this似乎表現地略有不同,這也是讓人“討厭”的地方~
ECMAScript規范中這樣寫:
this 關鍵字執行為當前執行環境的 ThisBinding。
MDN上這樣寫:
In most cases, the value of this is determined by how a function is called.
在絕大多數情況下,函數的調用方式決定了this的值。
可以這樣理解,在JavaScript中,this的指向是調用時決定的,而不是創建時決定的,這就會導致this的指向會讓人迷惑,簡單來說,this具有運行期綁定的特性。
參考資料:this - JavaScript | MDN
來看看不同的情況五花八門的this吧~
調用位置首先需要理解調用位置,調用位置就是函數在代碼中被調用的位置,而不是聲明的位置。
通過分析調用棧(到達當前執行位置所調用的所有函數)可以找到調用位置。
function baz(){ console.log("baz"); bar(); } function bar(){ console.log("bar"); foo(); } function foo(){ console.log("foo"); } baz();
當我們調用baz()時,它會以此調用baz()→bar()→foo()。
對于foo():調用位置是在bar()中。
對于bar():調用位置是在baz()中。
而對于baz():調用位置是全局作用域中。
可以看出,調用位置應該是當前正在執行的函數的前一個調用中。
全局上下文在全局執行上下文中this都指代全局對象。
this等價于window對象
var === this. === winodw.
console.log(window === this); // true var a = 1; this.b = 2; window.c = 3; console.log(a + b + c); // 6
在瀏覽器里面this等價于window對象,如果你聲明一些全局變量,這些變量都會作為this的屬性。
函數上下文在函數內部,this的值取決于函數被調用的方式。
直接調用this指向全局變量。
function foo(){ return this; } console.log(foo() === window); // truecall()、apply()
this指向綁定的對象上。
var person = { name: "axuebin", age: 25 }; function say(job){ console.log(this.name+":"+this.age+" "+job); } say.call(person,"FE"); // axuebin:25 say.apply(person,["FE"]); // axuebin:25
可以看到,定義了一個say函數是用來輸出name、age和job,其中本身沒有name和age屬性,我們將這個函數綁定到person這個對象上,輸出了本屬于person的屬性,說明此時this是指向對象person的。
如果傳入一個原始值(字符串、布爾或數字類型)來當做this的綁定對象, 這個原始值會被轉換成它的對象形式(new String()),這通常被稱為“裝箱”。
call和apply從this的綁定角度上來說是一樣的,唯一不同的是它們的第二個參數。
bind()this將永久地被綁定到了bind的第一個參數。
bind和call、apply有些相似。
var person = { name: "axuebin", age: 25 }; function say(){ console.log(this.name+":"+this.age); } var f = say.bind(person); console.log(f());箭頭函數
所有的箭頭函數都沒有自己的this,都指向外層。
關于箭頭函數的爭論一直都在,可以看看下面的幾個鏈接:
ES6 箭頭函數中的 this?你可能想多了(翻譯)
關于箭頭函數this的理解幾乎完全是錯誤的 #150
MDN中對于箭頭函數這一部分是這樣描述的:
An arrow function does not create its own this, the this value of the enclosing execution context is used.
箭頭函數會捕獲其所在上下文的this值,作為自己的this值。
function Person(name){ this.name = name; this.say = () => { var name = "xb"; return this.name; } } var person = new Person("axuebin"); console.log(person.say()); // axuebin
箭頭函數常用語回調函數中,例如定時器中:
function foo() { setTimeout(()=>{ console.log(this.a); },100) } var obj = { a: 2 } foo.call(obj);
附上MDN關于箭頭函數this的解釋:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#不綁定_this
作為對象的一個方法this指向調用函數的對象。
var person = { name: "axuebin", getName: function(){ return this.name; } } console.log(person.getName()); // axuebin
這里有一個需要注意的地方。。。
var name = "xb"; var person = { name: "axuebin", getName: function(){ return this.name; } } var getName = person.getName; console.log(getName()); // xb
發現this又指向全局變量了,這是為什么呢?
還是那句話,this的指向得看函數調用時。
作為一個構造函數this被綁定到正在構造的新對象。
通過構造函數創建一個對象其實執行這樣幾個步驟:
創建新對象
將this指向這個對象
給對象賦值(屬性、方法)
返回this
所以this就是指向創建的這個對象上。
function Person(name){ this.name = name; this.age = 25; this.say = function(){ console.log(this.name + ":" + this.age); } } var person = new Person("axuebin"); console.log(person.name); // axuebin person.say(); // axuebin:25作為一個DOM事件處理函數
this指向觸發事件的元素,也就是始事件處理程序所綁定到的DOM節點。
var ele = document.getElementById("id"); ele.addEventListener("click",function(e){ console.log(this); console.log(this === e.target); // true })HTML標簽內聯事件處理函數
this指向所在的DOM元素
jQuery的this在許多情況下JQuery的this都指向DOM元素節點。
$(".btn").on("click",function(){ console.log(this); });總結
如果要判斷一個函數的this綁定,就需要找到這個函數的直接調用位置。然后可以順序按照下面四條規則來判斷this的綁定對象:
由new調用:綁定到新創建的對象
由call或apply、bind調用:綁定到指定的對象
由上下文對象調用:綁定到上下文對象
默認:全局對象
注意:箭頭函數不使用上面的綁定規則,根據外層作用域來決定this,繼承外層函數調用的this綁定。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91936.html
摘要:原文地址基礎心法歡迎。也就是說,這三個方法可以改變函數體內部的指向。令為一個空列表。提供作為值并以作為參數列表,調用的內部方法,返回結果。在外面傳入的值會修改并成為值。語法其中,就是指向,是指定的參數。 原文地址:JavaScript基礎心法——call apply bind 歡迎star。 如果有錯誤的地方歡迎指正。 整理call、apply、bind這三個方法的的知識點。 之前...
摘要:原文地址基礎心法深淺拷貝歡迎。上面的代碼是最簡單的利用賦值操作符實現了一個淺拷貝,可以很清楚的看到,隨著和改變,和也隨著發生了變化。展開運算符結論實現的是對象第一層的深拷貝。 原文地址:JavaScript基礎心法——深淺拷貝 歡迎star。 如果有錯誤的地方歡迎指正。 淺拷貝和深拷貝都是對于JS中的引用類型而言的,淺拷貝就只是復制對象的引用,如果拷貝后的對象發生變化,原對象也會發生...
摘要:枚舉對象屬性列舉的可枚舉屬性,包括自身和原型鏈上的只列舉對象本身的可枚舉屬性創建對象的幾種方式對象字面量通過構造函數以指定的對象作為原型來創建對象這樣,的原型就是了如何判斷對象是否是空對象對象屬性的描述符屬性的描述符分描述符和訪問描述符,對 枚舉對象屬性 for....in 列舉obj的可枚舉屬性,包括自身和原型鏈上的 object.keys() 只列舉對象本身的可枚舉屬性 創建對象的...
摘要:前言書接上文細數實用黑科技一本文介紹獨孤九劍和兩篇最高內功心法。可以將變量轉換為布爾值。可以把任何類型的值轉換為布爾值,并且只有當這個變量的值為的時候才會返回,其他情況都返回。同樣的,函數體內部聲明的函數,作用域綁定函數體內部。 showImg(https://segmentfault.com/img/remote/1460000016507838); 前言 書接上文:細數 JavaS...
摘要:軟件測試江湖二神兵利器篇在上一篇文章中我們介紹了江湖上流傳的各種軟件測試的武功秘籍和心法,相信看過的小伙伴內力得到了很大的提升。功能測試篇功能測試,是軟件測試里的入門級心法,自然也有與之相對應的兵器來發揮心法的最大功力。 軟件測試江湖(二)神兵利器篇 在上一篇文章中我們介紹了江湖上流傳的各種軟件測試的武功秘籍和心法,相信看過的小伙伴內力得到了很大的提升。如果沒有,一定是你看的姿勢不對,...
閱讀 3075·2021-10-27 14:16
閱讀 2882·2021-09-24 10:33
閱讀 2291·2021-09-23 11:21
閱讀 3234·2021-09-22 15:14
閱讀 818·2019-08-30 15:55
閱讀 1682·2019-08-30 15:53
閱讀 1749·2019-08-29 11:14
閱讀 2194·2019-08-28 18:11