JavaScript基礎心法——this

hover_lew 發(fā)布于2019-08-22 11:11 / 826人閱讀

摘要：原文地址基礎心法歡迎。作為一個構造函數(shù)被綁定到正在構造的新對象。通過構造函數(shù)創(chuàng)建一個對象其實執(zhí)行這樣幾個步驟創(chuàng)建新對象將指向這個對象給對象賦值屬性方法返回所以就是指向創(chuàng)建的這個對象上。

原文地址：JavaScript基礎心法——this

歡迎star。

如果有錯誤的地方歡迎指正。

看看這個有著深不可測的魔力的this到底是個什么玩意兒 ~

什么是this

在傳統(tǒng)面向對象的語言中，比如Java，this關鍵字用來表示當前對象本身，或當前對象的一個實例，通過this關鍵字可以獲得當前對象的屬性和調(diào)用方法。

在JavaScript中，this似乎表現(xiàn)地略有不同，這也是讓人“討厭”的地方~

ECMAScript規(guī)范中這樣寫：

this 關鍵字執(zhí)行為當前執(zhí)行環(huán)境的 ThisBinding。

MDN上這樣寫：

In most cases, the value of this is determined by how a function is called.
在絕大多數(shù)情況下，函數(shù)的調(diào)用方式?jīng)Q定了this的值。

可以這樣理解，在JavaScript中，this的指向是調(diào)用時決定的，而不是創(chuàng)建時決定的，這就會導致this的指向會讓人迷惑，簡單來說，this具有運行期綁定的特性。

參考資料：this - JavaScript | MDN

來看看不同的情況五花八門的this吧~

調(diào)用位置

首先需要理解調(diào)用位置，調(diào)用位置就是函數(shù)在代碼中被調(diào)用的位置，而不是聲明的位置。

通過分析調(diào)用棧（到達當前執(zhí)行位置所調(diào)用的所有函數(shù)）可以找到調(diào)用位置。

function baz(){
  console.log("baz");
  bar();
}
function bar(){
  console.log("bar");
  foo();
}
function foo(){
  console.log("foo");
}
baz();

當我們調(diào)用baz()時，它會以此調(diào)用baz()→bar()→foo()。

對于foo()：調(diào)用位置是在bar()中。
對于bar()：調(diào)用位置是在baz()中。
而對于baz()：調(diào)用位置是全局作用域中。

可以看出，調(diào)用位置應該是當前正在執(zhí)行的函數(shù)的前一個調(diào)用中。

全局上下文

在全局執(zhí)行上下文中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的屬性。

函數(shù)上下文

在函數(shù)內(nèi)部，this的值取決于函數(shù)被調(diào)用的方式。

直接調(diào)用

this指向全局變量。

function foo(){
  return this;
}
console.log(foo() === window); // true

call()、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函數(shù)是用來輸出name、age和job，其中本身沒有name和age屬性，我們將這個函數(shù)綁定到person這個對象上，輸出了本屬于person的屬性，說明此時this是指向對象person的。

如果傳入一個原始值（字符串、布爾或數(shù)字類型）來當做this的綁定對象，這個原始值會被轉換成它的對象形式（new String()），這通常被稱為“裝箱”。

call和apply從this的綁定角度上來說是一樣的，唯一不同的是它們的第二個參數(shù)。

bind()

this將永久地被綁定到了bind的第一個參數(shù)。

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());

箭頭函數(shù)

所有的箭頭函數(shù)都沒有自己的this，都指向外層。

關于箭頭函數(shù)的爭論一直都在，可以看看下面的幾個鏈接：

ES6 箭頭函數(shù)中的 this？你可能想多了（翻譯）

關于箭頭函數(shù)this的理解幾乎完全是錯誤的 #150

MDN中對于箭頭函數(shù)這一部分是這樣描述的：

An arrow function does not create its own this, the this value of the enclosing execution context is used.
箭頭函數(shù)會捕獲其所在上下文的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

箭頭函數(shù)常用語回調(diào)函數(shù)中，例如定時器中：

function foo() {  
  setTimeout(()=>{
    console.log(this.a);
  },100)
}
var obj = {
  a: 2
}
foo.call(obj);

附上MDN關于箭頭函數(shù)this的解釋：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#不綁定_this

作為對象的一個方法

this指向調(diào)用函數(shù)的對象。

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

發(fā)現(xiàn)this又指向全局變量了，這是為什么呢？

還是那句話，this的指向得看函數(shù)調(diào)用時。

作為一個構造函數(shù)

this被綁定到正在構造的新對象。

通過構造函數(shù)創(chuàng)建一個對象其實執(zhí)行這樣幾個步驟：

創(chuàng)建新對象

將this指向這個對象

給對象賦值（屬性、方法）

返回this

所以this就是指向創(chuàng)建的這個對象上。

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事件處理函數(shù)

this指向觸發(fā)事件的元素，也就是始事件處理程序所綁定到的DOM節(jié)點。

var ele = document.getElementById("id");
ele.addEventListener("click",function(e){
  console.log(this);
  console.log(this === e.target); // true
})

HTML標簽內(nèi)聯(lián)事件處理函數(shù)

this指向所在的DOM元素

jQuery的this

在許多情況下JQuery的this都指向DOM元素節(jié)點。

$(".btn").on("click",function(){
  console.log(this); 
});

總結

如果要判斷一個函數(shù)的this綁定，就需要找到這個函數(shù)的直接調(diào)用位置。然后可以順序按照下面四條規(guī)則來判斷this的綁定對象：

由new調(diào)用：綁定到新創(chuàng)建的對象

由call或apply、bind調(diào)用：綁定到指定的對象

由上下文對象調(diào)用：綁定到上下文對象

默認：全局對象

注意：箭頭函數(shù)不使用上面的綁定規(guī)則，根據(jù)外層作用域來決定this，繼承外層函數(shù)調(diào)用的this綁定。

GPU云服務器云服務器 javascript的this javaScript中的this javascript中this詳解心法

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

轉載請注明本文地址：http://m.hztianpu.com/yun/91936.html

JavaScript基礎心法——call apply bind

摘要：原文地址基礎心法歡迎。也就是說，這三個方法可以改變函數(shù)體內(nèi)部的指向。令為一個空列表。提供作為值并以作為參數(shù)列表，調(diào)用的內(nèi)部方法，返回結果。在外面?zhèn)魅氲闹禃薷牟⒊蔀橹?。語法其中，就是指向，是指定的參數(shù)。原文地址：JavaScript基礎心法——call apply bind 歡迎star。如果有錯誤的地方歡迎指正。整理call、apply、bind這三個方法的的知識點。之前...

techstay 2019-08-22 11:10 評論0 收藏0
JavaScript基礎心法——深淺拷貝

摘要：原文地址基礎心法深淺拷貝歡迎。上面的代碼是最簡單的利用賦值操作符實現(xiàn)了一個淺拷貝，可以很清楚的看到，隨著和改變，和也隨著發(fā)生了變化。展開運算符結論實現(xiàn)的是對象第一層的深拷貝。原文地址：JavaScript基礎心法——深淺拷貝歡迎star。如果有錯誤的地方歡迎指正。淺拷貝和深拷貝都是對于JS中的引用類型而言的，淺拷貝就只是復制對象的引用，如果拷貝后的對象發(fā)生變化，原對象也會發(fā)生...

keithxiaoy 2019-08-21 17:22 評論0 收藏0
object in javascript

摘要：枚舉對象屬性列舉的可枚舉屬性，包括自身和原型鏈上的只列舉對象本身的可枚舉屬性創(chuàng)建對象的幾種方式對象字面量通過構造函數(shù)以指定的對象作為原型來創(chuàng)建對象這樣，的原型就是了如何判斷對象是否是空對象對象屬性的描述符屬性的描述符分描述符和訪問描述符，對枚舉對象屬性 for....in 列舉obj的可枚舉屬性，包括自身和原型鏈上的 object.keys() 只列舉對象本身的可枚舉屬性創(chuàng)建對象的...

geekzhou 2019-08-21 16:40 評論0 收藏0
細數(shù) JavaScript 實用黑科技(二)

摘要：前言書接上文細數(shù)實用黑科技一本文介紹獨孤九劍和兩篇最高內(nèi)功心法?？梢詫⒆兞哭D換為布爾值?？梢园讶魏晤愋偷闹缔D換為布爾值，并且只有當這個變量的值為的時候才會返回，其他情況都返回。同樣的，函數(shù)體內(nèi)部聲明的函數(shù)，作用域綁定函數(shù)體內(nèi)部。 showImg(https://segmentfault.com/img/remote/1460000016507838); 前言書接上文：細數(shù) JavaS...

馬忠志 2019-08-23 12:07 評論0 收藏0
軟件測試江湖（二）神兵利器篇

摘要：軟件測試江湖二神兵利器篇在上一篇文章中我們介紹了江湖上流傳的各種軟件測試的武功秘籍和心法，相信看過的小伙伴內(nèi)力得到了很大的提升。功能測試篇功能測試，是軟件測試里的入門級心法，自然也有與之相對應的兵器來發(fā)揮心法的最大功力。軟件測試江湖（二）神兵利器篇在上一篇文章中我們介紹了江湖上流傳的各種軟件測試的武功秘籍和心法，相信看過的小伙伴內(nèi)力得到了很大的提升。如果沒有，一定是你看的姿勢不對，...

_Suqin 2019-06-27 16:29 評論0 收藏0