一、this的原理

1.1問題的由來

學懂 JavaScript 語言，一個標志就是理解下面兩種寫法，可能有不一樣的結果

var obj = {foo: function () {} };var foo = obj.foo;// 寫法一 obj.foo()// 寫法二 foo()

上面代碼中，雖然obj.foo和foo指向同一個函數，但是執行結果可能不一樣。請看下面的例子。

var obj = {foo: function () { console.log(this.bar) },bar: 1 };var foo = obj.foo; var bar = 2;obj.foo() // 1 foo() // 2

這種差異的原因，就在于函數體內部使用了this關鍵字。很多教科書會告訴你，this指的是函數運行時所在的環境。對于obj.foo()來說，foo運行在obj環境，所以this指向obj；對于foo()來說，foo運行在全局環境，所以this指向全局環境。所以，兩者的運行結果不一樣。

函數的運行環境到底是怎么決定的？舉例來說，為什么obj.foo()就是在obj環境執行，而一旦var foo = obj.foo，foo()就變成在全局環境執行？

理解了這一點，你就會徹底理解this的作用。

1.2內存的數據結構

JavaScript 語言之所以有this的設計，跟內存里面的數據結構有關系。

var obj = { foo: 5 };

上面的代碼將一個對象賦值給變量obj。JavaScript 引擎會先在內存里面，生成一個對象{ foo: 5 }，然后把這個對象的內存地址賦值給變量obj。

也就是說，變量obj是一個地址（reference）。后面如果要讀取obj.foo，引擎先從obj拿到內存地址，然后再從該地址讀出原始的對象，返回它的foo屬性。

原始的對象以字典結構保存，每一個屬性名都對應一個屬性描述對象。舉例來說，上面例子的foo屬性，實際上是以下面的形式保存的。

{foo: {[[value]]: 5[[writable]]: true[[enumerable]]: true[[configurable]]: true} }

注意，foo屬性的值保存在屬性描述對象的value屬性里面。

1.3函數

這樣的結構是很清晰的，問題在于屬性的值可能是一個函數。

var obj = { foo: function () {} };

這時，引擎會將函數單獨保存在內存中，然后再將函數的地址賦值給foo屬性的value屬性。

{foo: {[[value]]: 函數的地址...} }

由于函數是一個單獨的值，所以它可以在不同的環境（上下文）執行。

var f = function () {}; var obj = { f: f };// 單獨執行 f()// obj 環境執行 obj.f()

1.4環境變量

JavaScript 允許在函數體內部，引用當前環境的其他變量。

var f = function () {console.log(x); };

上面代碼中，函數體里面使用了變量x。該變量由運行環境提供。

現在問題就來了，由于函數可以在不同的運行環境執行，所以需要有一種機制，能夠在函數體內部獲得當前的運行環境（context）。所以，this就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。

var f = function () {console.log(this.x); }

上面代碼中，函數體里面的this.x就是指當前運行環境的x。

var f = function () {console.log(this.x); }var x = 1; var obj = {f: f,x: 2, };// 單獨執行 f() // 1// obj 環境執行 obj.f() // 2

上面代碼中，函數f在全局環境執行，this.x指向全局環境的x。

在obj環境執行，this.x指向obj.x。

obj.foo()是通過obj找到foo，所以就是在obj環境執行。一旦var foo = obj.foo，變量foo就直接指向函數本身，所以foo()就變成在全局環境執行。

二、函數不同調用方式中this取值

JavaScript 中的 this，它可以是全局對象、當前對象或者任意對象，這完全取決于函數的調用方式。JavaScript 中函數的調用有以下幾種方式：

• 作為對象方法調用
• 作為函數直接調用
• 作為構造函數調用
• 使用 apply 或 call,bind 調用

我們將按照調用方式的不同，分別討論 this 的含義。

2.1作為對象方法調用

在 JavaScript 中，函數也是對象，因此函數可以作為一個對象的屬性，此時該函數被稱為該對象的方法，在使用這種調用方式時，this 被自然綁定到該對象

var test = { a:0, b:0,get:function(){return this.a; } } console.log(test.get()) //0var prop=30 var O={prop:37} function independent(){return this.prop } O.f=independentconsole.log(O.f()) //37 作為對象方法調用console.log(independent()) //30 作為函數直接調用

由此可見this是動態作用域，this的指向關鍵是看函數怎么調用而不是怎么創建

2.2作為函數直接調用

函數也可以直接被調用，此時 this 綁定到全局對象（在嚴格模式下為undefined）。在瀏覽器中，window 就是該全局對象。

function fn1 (){return this } console.log(fn1()) //windowfunction fn2 (){"use strict";//see strict modereturn this } console.log(fn2 ()) //undefined

2.3作為構造函數調用

• 當函數作為構造函數調用時,this代表new出來的對象，并且對象的原型會指向構造器的prototype(構造器是Foo、foo.constructor=Foo )
• 如果沒有使用new而是直接調用函數,this===window;

function Foo (name){this.name = name ;console.log(this) } var foo = new Foo('Emma'); //Foo {name: "Emma"} Foo() //window

2.4使用 apply 或 call,bind 調用

apply 和 call允許切換函數執行的上下文環境（context），即 this 綁定的對象。this取得的是apply() 、call()、 bind()調用時傳入的第一個參數（bind是ES5提供的方法，所以只有IE9及以上才支持）

2.4.1 apply()、call()

function add(c,d){return this.a + this.b +c + d; }var O = {a:1,b:3}add.call(O,5,7); //1+3+5+7add.apply(O,[10,20]) //1+3+10+20function bar(){console.log(Object.prototype.toString.call(this)) }bar.call(7) // "[object Number]"

2.4.2 bind()改變this取值

function f(){return this.a }var g = f.bind({a:"test"}) console.log(g()); //testvar O = {a:37,f:f,g:g}; console.log(O.f(),O.g()) //37,test

bind與new（用new調用bind改變不了this取值）

function foo(){this.b=100;return this.a } var func = foo.bind({a:1}) func(); //1 new func(); //{b:100}

直接調用func()，this會指向bind中的參數，所以返回值為1，由于執行this.b=100,所以this對象會有個b屬性，最終this為{a: 1, b: 100}。用new的話return如果不是對象會把this作為返回值，并且this會被初始化為一個默認的空對象，對象的原型是構造器的prototype，所以這里雖然用了bind的方法，但是this仍然會指向沒有bind的情況。this指向空對象，空對象的原型指向foo.prototype，空對象的b屬性會設置為100，整個對象會作用返回值(return this.a 被忽視）所以結果為{b:100}.

bind與currying(函數柯里化：把一個函數拆成多個單元）

function add(a,b,c){return a + b + c }var func = add.bind(undefined,100); func(1,2) //103 (100 + 1 +2)var func2 = func.bind(undefined,200); func2(10) //310 (100+ 200 + 10)

有時候不需要一次性把函數都調用完，而是調用一次把前幾個參數傳完了以后得到了一個函數再去調用，并且每次都傳入自己所需要傳入的值。

add.bind不需要改變this，那么就傳入undefined（null也可），但是我們提供了額外參數100，那么bind方法就會把100賦值給a,再調用的時候1會給b，2就會給c，所以最后答案是103。再func.bind一次a上次綁定了100，b就會綁定為200，再調用func2傳入值為10,10賦值為c,所以func2調用結果為310。

function getConfig(color,size,otherOptions){console.log(color,size,otherOptions) }var defaultConfig=getConfig.bind(null,"#cc0000","1024*768");defaultConfig("123") //#cc0000","1024*768,123 defaultConfig("456") //#cc0000","1024*768,456

三、不同環境this的取值

3.1全局作用域中this(瀏覽器)

全局作用域中的this一般指向全局對象，在瀏覽器中全局對象就是window

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

3.2對象原型鏈上的this

var o={ f:function(){ this.a + this.b } } var p=Object.create(o) p.a=1 p.b=4 console.log(p.f()) //5

p是空對象并且它的原型會指向o(p.__proto__===o)，調用原型上的方法（對象本身沒有此方法會沿著原型鏈向上查找，原型鏈上的this也可以指向Object.create創建的對象，此this的指向與new創建實例對象的指向類似）this.a和this.b仍然能取到對象p上的a和b。即原型鏈上的this可以指向所在的對象（p對象）

注：p的構造器不為o，為Object（p.constructor===Object），這是用Object.create創建對象與new實例創建對象的不同,如果是new創建的實例對象構造器就是o。

3.3get/set方法與this

此時this的指向與原型鏈上的this的指向類似

function modules(){return Math.sqrt(this.re*this.re + this.im*this.im) }var o={re:1,im:-1,get phase(){return Math.atan2(this.im,this.re)} }Object.defineProperty(o,"modules",{get:modules,enumerable:true,configurable:true })console.log(o.phase,o.modules) //logs -0.781.4142

get、set方法中的this，一般情況下也是會指向get，set方法所在的對象（與一般對象屬性作為函數對象類似）。

參考：

JavaScript 的 this 原理

https://blog.csdn.net/qq_40646986/article/details/82657909

總結

以上是生活随笔為你收集整理的object取值_this的原理、函数的不同调用方式this取值、以及不同环境下this的取值、函数四种调用方法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。