JavaScript中的this

xuxueli 發(fā)布于2019-08-20 16:00 / 1589人閱讀

摘要：函數(shù)定義在全局作用域中，引用了對象，調用函數(shù)之前，的值并不確定，可能會在代碼執(zhí)行過程中引用不同的對象。在全局環(huán)境中調用函數(shù)時，引用的就是全局對象。這兩個方法的用途都是在特定的作用域中調用函數(shù)，實際上等于設置函數(shù)體內(nèi)對象的值。

本文首發(fā)于知乎專欄：前端指南

this是函數(shù)內(nèi)部的一個特殊對象，它引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象。

全局環(huán)境下的this

當在網(wǎng)頁的全局作用域中調用函數(shù)時，this對象引用的就是window。

console.log(this);//Window

function f() {
    return this;
}
f();//Window

函數(shù)f()定義在全局作用域中，引用了this對象，調用函數(shù)之前，this的值并不確定，可能會在代碼執(zhí)行過程中引用不同的對象。在全局環(huán)境中調用函數(shù)f()時，this引用的就是全局對象Window。

對象中的this

將一個函數(shù)賦給對象，通過對象調用這個函數(shù)，它們的this是調用該函數(shù)的對象。

var o = {
    color: "blue",
    sayColor: function () {
        return this.color;
    }
};

o.sayColor();//blue

將函數(shù)sayColor賦給對象o，o.sayColor()被調用時，函數(shù)內(nèi)部的this被綁定到o
我們也可以用如下方法：

var o = { color: "blue" };

function sayColor() {
    return this.color;
}

o.sayColor = sayColor;
o.sayColor();//blue

函數(shù)的名字僅僅是一個包含指針的變量，在何處定義調用函數(shù)不會影響到this的行為，全局的sayColor()與o.sayColor()指向的是同一個函數(shù)。

構造函數(shù)中的this

函數(shù)或方法之前帶有關鍵字new，它就構成了構造函數(shù)調用。通過構造函數(shù)生成一個新的對象，this指向新對象、

function person() {
    this.name = "Jack";
}
var o = new person();
console.log(o.name);//Jack

apply和call

每個函數(shù)都包含兩個非繼承而來的方法，apply()和call()。這兩個方法的用途都是在特定的作用域中調用函數(shù)，實際上等于設置函數(shù)體內(nèi)this對象的值。首先apply()方法接收兩個參數(shù)：一個是在其中運行函數(shù)的作用域，另一個是參數(shù)數(shù)組。其中，第二個參數(shù)可以是Array實例，也可以是 arguments對象。

function sum(num1, num2) {
    return num1 + num2;
}
function callSum1(num1, num2) {
    return sum.apply(this, arguments);
}
function callSum2(num1, num2) {
    return sum.apply(this, [num1, num2]);
}
console.log(callSum1(10, 10));//20
console.log(callSum2(10, 10));//20

上邊這個例子中，callSum1()在執(zhí)行sum()函數(shù)時傳入了this作為this值（在作用域中調用的，傳入的就是window對象）和arguments對象。而callSum2()也調用了sum()函數(shù)，但傳入的是this和一個參數(shù)數(shù)組。

注：在嚴格模式下，未指定環(huán)境對象而調用函數(shù)，則this值不會被轉型為window，除非明確把函數(shù)添加到某個對象或者調用apply()或call()，否則this值是undefined。

call()與apply()方法作用相同，區(qū)別僅僅在于接收參數(shù)方式不同，對call()而言，第一個參數(shù)是this沒有變化，不同的是其余參數(shù)都直接傳遞給函數(shù)。換句話說，在使用call()方法時，傳遞給函數(shù)的參數(shù)必須逐個列舉出來。

function sum(num1, num2) {
    return num1 + num2;
}
function callSum(num1, num2) {
    return sum.call(this, num1, num2);
}
console.log(callSum(10, 10));//20

call()和apply()真正強大的地方在于能擴充函數(shù)賴以運行的作用域。

window.color = "red";
var o = { color: "blue" };
function sayColor() {
    console.log(this.color);
}
sayColor();//red
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue

使用call()或者apply()擴充作用域最大的好處，就是對象不需要與方法有任何耦合關系。

bind

ES5還定義了bind,這個方法會創(chuàng)建一個函數(shù)的實例，其this值會被綁定傳給bind()函數(shù)的值

window.color = "red";
var o = { color: "blue" };
function sayColor() {
    console.log(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor();//blue

在sayColor()調用bind()并傳入對象o，創(chuàng)建了objectSayColor()函數(shù),該函數(shù)的this值等于o因此即使在全局作用域中調用這個函數(shù)，也會看到“blue”。

閉包中的this

閉包中使用this對象可能會導致一些問題，this對象在運行時是基于函數(shù)的執(zhí)行環(huán)境對象的：在全局函數(shù)中，this等于window，而當函數(shù)被作為某個對象方法調用時，this等于那個對象。匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此其this對象通常指向window。

var color = "red";
var o = {
    name: "blue",
    sayColor: function () {
        return function () {
            return this.color;
        };
    }
}
console.log(o.sayColor()());//red
//改進
var o = {
    color: "blue",
    sayColor: function () {
        var that = this;
        return function () {
            return that.color;
        };
    }
}
console.log(o.sayColor()());//blue

ES6中箭頭函數(shù)中的this

this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象。但是在使用箭頭函數(shù)時，函數(shù)體內(nèi)的this對象，就是定義時所在的對象，而不是使用時所在的對象。箭頭函數(shù)的使用可參考鏈接
http://es6.ruanyifeng.com/#do...

function foo() {
    setTimeout(() => {
        console.log("id:", this.id);
    }, 100)
}
var id = 21;
foo.call({ id: 42 });//id：42

箭頭函數(shù)中的this指向foo的this，箭頭函數(shù)中也不存在arguments，指向外層函數(shù)foo對象的arguments。

由于箭頭函數(shù)沒有自己的this，所以也不能用call()、apply()、bind()改變this的指向。

綁定this

函數(shù)綁定運算符是::，雙冒號是左邊是一個對象，右邊是一個函數(shù)。該運算符會自動將左邊的對象作為上下文環(huán)境（this對象），綁定到右邊函數(shù)上。詳細可參考鏈接
http://es6.ruanyifeng.com/#do...

foo::bar;
//等同于
bar.bind(foo);

在判斷this指向時，要記住，在沒有綁定this的情況下，this動態(tài)綁定，指向運行時的環(huán)境，而非代碼中的位置，只有箭頭函數(shù)才是靜態(tài)綁定，將this綁定到代碼中的位置。

云服務器 GPU云服務器 javaScript中的this js中的this js中的this機制 js中的this與html

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/82650.html

JavaScript深入淺出

摘要：理解的函數(shù)基礎要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法，包括，，。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家?guī)韼椭?...（據(jù)說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現(xiàn)僅再次顯示大多數(shù)是而不是特定的任何內(nèi)容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內(nèi)置函數(shù)（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數(shù)字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數(shù)對象中，這兩個屬性的有什么區(qū)別呢表示該函數(shù)對象的原型表示使用來執(zhí)行該函數(shù)時這種函數(shù)一般成為構造函數(shù)，后面會講解，新創(chuàng)建的對象的原型。這時的函數(shù)通常稱為構造函數(shù)。。本文原發(fā)于我的個人博客，經(jīng)多次修改后發(fā)到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發(fā)，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0
JavaScript進階之’this‘

摘要：所以相同點是，在全局范圍內(nèi)，全局變量終究是屬于老大的。只生效一次引入了。只生效一次在箭頭函數(shù)中，與封閉詞法環(huán)境的保持一致。我通常把這些原始函數(shù)叫做構造函數(shù)。在里面你可以嵌套函數(shù)，也就是你可以在函數(shù)里面定義函數(shù)。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

shenhualong 2019-08-23 18:37 評論0 收藏0
理解 JavaScript 中的 this 關鍵字

摘要：原文許多人被中的關鍵字給困擾住了，我想混亂的根源來自人們理所當然地認為中的應該像中的或中的一樣工作。盡管有點難理解，但它的原理并不神秘。在瀏覽器中，全局對象是對象。運算符創(chuàng)建一個新對象并且設置函數(shù)中的指向調用函數(shù)的新對象。原文：Understanding the this keyword in JavaScript 許多人被JavaScript中的this關鍵字給困擾住了，我想混亂的...

jayzou 2019-08-21 10:32 評論0 收藏0