JavaScript中的this例題實(shí)戰(zhàn)總結(jié)詳析
前言
是否能夠深刻理解 this，是前端 JavaScript 進(jìn)階的重要一環(huán)。
面向?qū)ο笳Z言中 this 表示當(dāng)前對(duì)象的一個(gè)引用，但在 JavaScript 中 this 不是固定不變的，它會(huì)隨著執(zhí)行環(huán)境的改變而改變。
有一種廣為流傳的說法是：“誰調(diào)用它，this 就指向誰”。也就是說普通函數(shù)在定義的時(shí)候無法確定 this 引用取值，因?yàn)楹瘮?shù)沒有被調(diào)用，也就沒有運(yùn)行的上下文環(huán)境，因此在函數(shù)中 this 的引用取值，是在函數(shù)被調(diào)用的時(shí)候確定的。
函數(shù)在不同的情況下被調(diào)用，就會(huì)產(chǎn)生多種不同的運(yùn)行上下文環(huán)境，所以 this 的引用取值也就是隨著執(zhí) 行環(huán)境的改變而改變了。
還有一句經(jīng)典的話：“匿名函數(shù)的 this 永遠(yuǎn)指向 window”。
還有通過 call、apply、bind 和 new 操作符改變的 this 它們誰的優(yōu)先級(jí)更高呢？還有它們的實(shí)現(xiàn)原理是怎么樣的呢？最后我們手寫實(shí)現(xiàn) call、apply、bind 和 new 操作符來進(jìn)一步理解 this。
下面先根據(jù)具體環(huán)境來逐一分析。
普通函數(shù)中的 this
我們來看例題：請(qǐng)給出下面代碼的運(yùn)行結(jié)果。
例題1
function f1 () {
console.log(this)
}
f1() // window普通函數(shù)在非嚴(yán)格的全局環(huán)境下調(diào)用時(shí)，其中的 this 指向的是 window。
例題2
"use strict"
function f1 () {
console.log(this)
}
f1() // undefined用了嚴(yán)格模式 "use strict"，嚴(yán)格模式下無法再意外創(chuàng)建全局變量，所以 this 不為 window 而為 undefined。
注意：babel 轉(zhuǎn)成 ES6 的，babel 會(huì)自動(dòng)給 js 文件上加上嚴(yán)格模式。
箭頭函數(shù)中的 this
在箭頭函數(shù)中，this 的指向是由外層(函數(shù)或全局)作用域來決定的。
例題3
const Animal = {
getName: function() {
setTimeout(function() {
console.log(this)
})
}
}
Animal.getName() // window此時(shí) this 指向 window。這里也印證了那句經(jīng)典的話：“匿名函數(shù)的 this 永遠(yuǎn)指向 window”。
如果要讓 this 指向 Animal 這個(gè)對(duì)象，則可以巧用箭頭函數(shù)來解決。
例題4
const Animal = {
getName: function() {
setTimeout(() => {
console.log(this)
})
}
}
Animal.getName() // {getName: ?}嚴(yán)格模式對(duì)箭頭函數(shù)沒有效果
例題5
"use strict";
const f1 = () => {
console.log(this)
}
f1() // window我們都知道箭頭函數(shù)體內(nèi)的 this 對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。普通函數(shù)使用了嚴(yán)格模式 this 會(huì)指向 undefined 但箭頭函數(shù)依然指向了 window。
函數(shù)作為對(duì)象的方法中的 this
例題6
const obj = {
name: "coboy",
age: 18,
add: function() {
console.log(this, this.name, this.age)
}
};
obj.add(); // {name: "coboy", age: 18, add: ?} "coboy" 18在對(duì)象方法中，作為對(duì)象的一個(gè)方法被調(diào)用時(shí)，this 指向調(diào)用它所在方法的對(duì)象。也就是開頭我們所說的那句：“誰調(diào)用了它，它就指向誰”，在這里很明顯是 obj 調(diào)用了它。
例題7
const obj = {
name: "coboy",
age: 18,
add: function() {
console.log(this, this.name, this.age)
}
};
const fn = obj.add
fn() // window這個(gè)時(shí)候 this 則仍然指向 window。obj 對(duì)象方法 add 賦值給 fn 之后，fn 仍然在 window 的全局環(huán)境中執(zhí)行，所以 this 仍然指向 window。
例題8
const obj = {
name: "coboy",
age: 18,
add: function() {
function fn() {
console.log(this)
}
fn()
}
};
obj.add() // window如果在對(duì)象方法內(nèi)部聲明一個(gè)函數(shù)，這個(gè)函數(shù)的 this 在對(duì)象方法執(zhí)行的時(shí)候指向就不是這個(gè)對(duì)象了，而是指向 window 了。
同樣想要 this 指向 obj 可以通過箭頭函數(shù)來實(shí)現(xiàn)：
const obj = {
name: "coboy",
age: 18,
add: function() {
const fn = () => {
console.log(this)
}
fn()
}
};
obj.add() // obj再次說明箭頭函數(shù)的 this 是由外層函數(shù)作用域或者全局作用域決定的。
上下文對(duì)象調(diào)用中的 this
例題9
const obj = {
name: "coboy",
age: 18,
add: function() {
return this
}
};
console.log(obj.add() === obj) // true參考上文我們很容易知道 this 就是指向 obj 對(duì)象本身，所以返回 true。
例題10
const animal = {
name: "coboy",
age: 18,
dog: {
name: 'cobyte',
getName: function() {
console.log(this.name)
}
}
};
animal.dog.getName() // 'cobyte'如果函數(shù)中的 this 是被上一級(jí)的對(duì)象所調(diào)用的，那么 this 指向的就是上一級(jí)的對(duì)象，也就是開頭所說的：“誰調(diào)用了它，它就指向誰”。
例題11
const obj1 = {
txt: 'coboy1',
getName: function() {
return this.txt
}
}
const obj2 = {
txt: 'coboy2',
getName: function() {
return obj1.getName()
}
}
const obj3 = {
txt: 'coboy3',
getName: function() {
return obj2.getName()
}
}
console.log(obj1.getName())
console.log(obj2.getName())
console.log(obj3.getName())三個(gè)最終都打印了coboy1。
執(zhí)行 obj3.getName 里面返回的是 obj2.getName 里面返回的結(jié)果，obj2.getName 里面返回的是 obj1.getName 的結(jié)果，obj1.getName 返回的結(jié)果就是 'coboy1'。
如果上面的題改一下：
例題12
const obj1 = {
txt: 'coboy1',
getName: function() {
return this.txt
}
}
const obj2 = {
txt: 'coboy2',
getName: function() {
return obj1.getName()
}
}
const obj3 = {
txt: 'coboy3',
getName: function() {
const fn = obj1.getName
return fn()
}
}
console.log(obj1.getName())
console.log(obj2.getName())
console.log(obj3.getName())這個(gè)時(shí)候輸出了 coboy1, coboy1, undefined。
最后一個(gè)其實(shí)在上面例題5中已經(jīng)有說明了。通過 const fn = obj1.getName 的賦值進(jìn)行了“裸奔”調(diào)用，因此這里的 this 指向了 window,運(yùn)行結(jié)果當(dāng)然是 undefined。
例題13
上述的例題10中的 obj2.getName() 如果要它輸出‘coboy2’，如果不使用 bind、call、apply 方法該怎么做？
const obj1 = {
txt: 'coboy1',
getName: function() {
return this.txt
}
}
const obj2 = {
txt: 'coboy2',
getName: obj1.getName
}
console.log(obj1.getName())
console.log(obj2.getName())上述方法同樣說明了那個(gè)重要的結(jié)論：this 指向最后調(diào)用它的對(duì)象。
我們將函數(shù) obj1 的 getName 函數(shù)掛載到了 obj2 的對(duì)象上，getName 最終作為 obj2 對(duì)象的方法被調(diào)用。
在構(gòu)造函數(shù)中的 this
通過 new 操作符來構(gòu)建一個(gè)構(gòu)造函數(shù)的實(shí)例對(duì)象，這個(gè)構(gòu)造函數(shù)中的 this 就指向這個(gè)新的實(shí)例對(duì)象。同時(shí)構(gòu)造函數(shù) prototype 屬性下面方法中的 this 也指向這個(gè)新的實(shí)例對(duì)象。
例題14
function Animal(){
console.log(this) // Animal {}
}
const a1 = new Animal();
console.log(a1) // Animal {}function Animal(){
this.txt = 'coboy';
this.age = 100;
}
Animal.prototype.getNum = function(){
return this.txt;
}
const a1 = new Animal();
console.log(a1.age) // 100
console.log(a1.getNum()) // 'coboy'在構(gòu)造函數(shù)中出現(xiàn)顯式 return 的情況。
例題15
function Animal(){
this.txt = 'coboy'
const obj = {txt: 'cobyte'}
return obj
}
const a1 = new Animal();
console.log(a1.txt) // cobyte此時(shí) a1 返回的是空對(duì)象 obj。
例題16
function Animal(){
this.txt = 'coboy'
return 1
}
const a1 = new Animal();
console.log(a1.txt) // 'coboy'由此可以看出，如果構(gòu)造函數(shù)中顯式返回一個(gè)值，且返回的是一個(gè)對(duì)象，那么 this 就指向返回的對(duì)象，如果返回的不是一個(gè)對(duì)象，而是基本類型，那么 this 仍然指向?qū)嵗?/p>
call，apply，bind 顯式修改 this 指向
call方法
例題17
const obj = {
txt: "coboy",
age: 18,
getName: function() {
console.log(this, this.txt)
}
};
const obj1 = {
txt: 'cobyte'
}
obj.getName(); // this指向obj
obj.getName.call(obj1); // this指向obj1
obj.getName.call(); // this指向windowapply方法
例題18
const obj = {
txt: "coboy",
age: 18,
getName: function() {
console.log(this, this.txt)
}
};
const obj1 = {
txt: 'cobyte'
}
obj.getName.apply(obj1) // this指向obj1
obj.getName.apply() // this指向windowcall 方法和 apply 方法的區(qū)別
例題19
const obj = {
txt: "coboy",
age: 18,
getName: function(name1, name2) {
console.log(this, name1, name2)
}
};
const obj1 = {
txt: 'cobyte'
}
obj.getName.call(obj1, 'coboy1', 'coboy2')
obj.getName.apply(obj1, ['coboy1', 'coboy2'])可見 call 和 apply 主要區(qū)別是在傳參上。apply 方法與 call 方法用法基本相同，不同點(diǎn)主要是 call() 方法的第二個(gè)參數(shù)和之后的參數(shù)可以是任意數(shù)據(jù)類型，而 apply 的第二個(gè)參數(shù)是數(shù)組類型或者 arguments 參數(shù)集合。
bind 方法
例題20
const obj = {
txt: "coboy",
age: 18,
getName: function() {
console.log(this.txt)
}
};
const obj2 = {
txt: "cobyte"
}
const newGetName = obj.getName.bind(obj2)
newGetName() // this指向obj2
obj.getName() // this仍然指向objbind() 方法也能修改 this 指向，不過調(diào)用 bind() 方法不會(huì)執(zhí)行 getName()函數(shù)，也不會(huì)改變 getName() 函數(shù)本身，只會(huì)返回一個(gè)已經(jīng)修改了 this 指向的新函數(shù)，這個(gè)新函數(shù)可以賦值給一個(gè)變量，調(diào)用這個(gè)變量新函數(shù)才能執(zhí)行 getName()。
call() 方法和 bind() 方法的區(qū)別在于
- bind 的返回值是函數(shù)，并且不會(huì)自動(dòng)調(diào)用執(zhí)行。
- 兩者后面的參數(shù)的使用也不同。call 是 把第二個(gè)及以后的參數(shù)作為原函數(shù)的實(shí)參傳進(jìn)去， 而 bind 實(shí)參在其傳入?yún)?shù)的基礎(chǔ)上往后獲取參數(shù)執(zhí)行。
例題21
function fn(a, b, c){
console.log(a, b, c);
}
const fn1 = fn.bind({abc : 123},600);
fn(100,200,300) // 100,200,300
fn1(100,200,300) // 600,100,200
fn1(200,300) // 600,200,300
fn.call({abc : 123},600) // 600,undefined,undefined
fn.call({abc : 123},600,100,200) // 600,100,200this 優(yōu)先級(jí)
我們通常把通過 call、apply、bind、new 對(duì) this 進(jìn)行綁定的情況稱為顯式綁定，而把根據(jù)調(diào)用關(guān)系確定 this 指向的情況稱為隱式綁定。那么顯示綁定和隱式綁定誰的優(yōu)先級(jí)更高呢？
例題22
function getName() {
console.log(this.txt)
}
const obj1 = {
txt: 'coboy1',
getName: getName
}
const obj2 = {
txt: 'coboy2',
getName: getName
}
obj1.getName.call(obj2) // 'coboy2'
obj2.getName.apply(obj1) // 'coboy1'可以看出 call、apply 的顯示綁定比隱式綁定優(yōu)先級(jí)更高些。
例題23
function getName(name) {
this.txt = name
}
const obj1 = {}
const newGetName = getName.bind(obj1)
newGetName('coboy')
console.log(obj1) // {txt: "coboy"}當(dāng)再使用 newGetName 作為構(gòu)造函數(shù)時(shí)。
const obj2 = new newGetName('cobyte')
console.log(obj2.txt) // 'cobyte'這個(gè)時(shí)候新對(duì)象中的 txt 屬性值為 'cobyte'。
newGetName 函數(shù)本身是通過 bind 方法構(gòu)造的函數(shù)，其內(nèi)部已經(jīng)將this綁定為 obj1,當(dāng)它再次作為構(gòu)造函數(shù)通過 new 被調(diào)用時(shí)，返回的實(shí)例就已經(jīng)和 obj1 解綁了。也就是說，new 綁定修改了 bind 綁定中的 this 指向，所以 new 綁定的優(yōu)先級(jí)比顯式 bind 綁定的更高。
例題24
function getName() {
return name => {
return this.txt
}
}
const obj1 = { txt: 'coboy1' }
const obj2 = { txt: 'coboy2' }
const newGetName = getName.call(obj1)
console.log(newGetName.call(obj2)) // 'coboy1'由于 getName 中的 this 綁定到了 obj1 上，所以 newGetName(引用箭頭函數(shù)) 中的 this 也會(huì)綁到 obj1 上，箭頭函數(shù)的綁定無法被修改。
例題25
var txt = 'good boy'
const getName = () => name => {
return this.txt
}
const obj1 = { txt: 'coboy1' }
const obj2 = { txt: 'coboy2' }
const newGetName = getName.call(obj1)
console.log(newGetName.call(obj2)) // 'good boy'例題26
const txt = 'good boy'
const getName = () => name => {
return this.txt
}
const obj1 = { txt: 'coboy1' }
const obj2 = { txt: 'coboy2' }
const newGetName = getName.call(obj1)
console.log(newGetName.call(obj2)) // undefinedconst 聲明的變量不會(huì)掛到 window 全局對(duì)象上，所以 this 指向 window 時(shí)，自然也找不到 txt 變量了。
箭頭函數(shù)的 this 綁定無法修改
例題27
function Fn() {
return txt => {
return this.txt
}
}
const obj1 = {
txt: 'coboy'
}
const obj2 = {
txt: 'cobyte'
}
const f = Fn.call(obj1)
console.log(f.call(obj2)) // 'coboy'由于 Fn 中的 this 綁定到了 obj1 上，所以 f 中的 this 也會(huì)綁定到 obj1 上， 箭頭函數(shù)的綁定無法被修改。
例題28
var txt = '意外不'
const Fn = () => txt => {
return this.txt
}
const obj1 = {
txt: 'coboy'
}
const obj2 = {
txt: 'cobyte'
}
const f = Fn.call(obj1)
console.log(f.call(obj2)) // '意外不'如果將 var 聲明方式改成 const 或 let 則最后輸出為 undefined，原因是使用 const 或 let 聲明的變量不會(huì)掛載到 window 全局對(duì)象上。因此，this 指向 window 時(shí)，自然也找不到 txt 變量了。
從手寫 new 操作符中去理解 this
有一道經(jīng)典的面試題，JS 的 new 操作符到底做了什么？
- 創(chuàng)建一個(gè)新的空對(duì)象
- 把這個(gè)新的空對(duì)象的隱式原型（
__proto__）指向構(gòu)造函數(shù)的原型對(duì)象（prototype） - 把構(gòu)造函數(shù)中的 this 指向新創(chuàng)建的空對(duì)象并且執(zhí)行構(gòu)造函數(shù)返回執(zhí)行結(jié)果
- 判斷返回的執(zhí)行結(jié)果是否是引用類型，如果是引用類型則返回執(zhí)行結(jié)果，new 操作失敗，否則返回創(chuàng)建的新對(duì)象
/*
create函數(shù)要接受不定量的參數(shù)，第一個(gè)參數(shù)是構(gòu)造函數(shù)（也就是new操作符的目標(biāo)函數(shù)），其余參數(shù)被構(gòu)造函數(shù)使用。
new Create() 是一種js語法糖。我們可以用函數(shù)調(diào)用的方式模擬實(shí)現(xiàn)
*/
function create(Fn,...args){
// 1、創(chuàng)建一個(gè)空的對(duì)象
let obj = {}; // let obj = Object.create({});
// 2、將空對(duì)象的原型prototype指向構(gòu)造函數(shù)的原型
Object.setPrototypeOf(obj,Fn.prototype); // obj.__proto__ = Fn.prototype
// 以上 1、2步還可以通過 const obj = Object.create(Fn.prototype) 實(shí)現(xiàn)
// 3、改變構(gòu)造函數(shù)的上下文（this）,并將參數(shù)傳入
let result = Fn.apply(obj,args);
// 4、如果構(gòu)造函數(shù)執(zhí)行后，返回的結(jié)果是對(duì)象類型，則直接將該結(jié)果返回，否則返回 obj 對(duì)象
return result instanceof Object ? result : obj;
// return typeof result === 'object' && result != null ? result : obj
}一般情況下構(gòu)造函數(shù)沒有返回值，但是作為函數(shù)，是可以有返回值的，這就解析了上面例題15和例題16的原因了。 在 new 的時(shí)候，會(huì)對(duì)構(gòu)造函數(shù)的返回值做一些判斷：如果返回值是基礎(chǔ)數(shù)據(jù)類型，則忽略返回值，如果返回值是引用數(shù)據(jù)類型，則使用 return 的返回，也就是 new 操作符無效。
從手寫 call、apply、bind 中去理解 this
手寫 call 的實(shí)現(xiàn)
Function.prototype.myCall = function (context, ...args) {
context = context || window
// 創(chuàng)建唯一的屬性防止污染
const key = Symbol()
// this 就是綁定的那個(gè)函數(shù)
context[key] = this
const result = context[key](...args)
delete context[key]
return result
}- myCall 中的 this 指向誰？
myCall 已經(jīng)設(shè)置在 Function 構(gòu)造函數(shù)的原型對(duì)象（prototype）上了，所以每個(gè)函數(shù)都可以調(diào)用 myCall 方法，比如函數(shù) Fn.myCall()，根據(jù) this 的確定規(guī)律：“誰調(diào)用它，this 就指向誰”，所以myCall方法內(nèi)的 this 就指向了調(diào)用的函數(shù)，也可以說是要綁定的那個(gè)函數(shù)。
- Fn.myCall(obj) 本質(zhì)就是把函數(shù) Fn 賦值到 對(duì)象 obj 上，然后通過對(duì)象 obj.Fn() 來執(zhí)行函數(shù) Fn，那么最終又回到那個(gè) this 的確定規(guī)律：“誰調(diào)用它，this 就指向誰”，因?yàn)閷?duì)象 obj 調(diào)用了 Fn 所以 Fn 內(nèi)部的 this 就指向了對(duì)象 obj。
手寫 apply 的實(shí)現(xiàn)
apply 的實(shí)現(xiàn)跟 call 的實(shí)現(xiàn)基本是一樣的，因?yàn)樗麄兊氖褂梅绞揭不疽粯樱皇莻鲄⒌姆绞讲灰粯?。apply 的參數(shù)必須以數(shù)組的形式傳參。
Function.prototype.myApply = function (context, args) {
if(!Array.isArray(args)) {
new Error('參數(shù)必須是數(shù)組')
}
context = context || window
// 創(chuàng)建唯一的屬性防止污染
const key = Symbol()
// this 就是綁定的那個(gè)函數(shù)
context[key] = this
const result = context[key](...args)
delete context[key]
return result
}手寫 bind 的實(shí)現(xiàn)
bind 和 call、apply 方法的區(qū)別是它不會(huì)立即執(zhí)行，它是返回一個(gè)改變了 this 指向的函數(shù)，在綁定的時(shí)候可以傳參，之后執(zhí)行的時(shí)候，還可以繼續(xù)傳參數(shù)數(shù)。這個(gè)就是一個(gè)典型的閉包行為了，是不是。
我們先來實(shí)現(xiàn)一個(gè)簡單版的：
Function.prototype.myBind = function (ctx, ...args) {
// 根據(jù)上文我們可以知道 this 就是調(diào)用的那個(gè)函數(shù)
const self = this
return function bound(...newArgs) {
// 在再次執(zhí)行的的時(shí)候去改變 this 的指向
return self.apply(ctx, [...args, ...newArgs])
}
}但是，就如之前在 this 優(yōu)先級(jí)分析那里所展示的規(guī)則：bind 返回的函數(shù)如果作為構(gòu)造函數(shù)通過 new 操作符進(jìn)行實(shí)例化操作的話，綁定的 this 就會(huì)實(shí)效。
為了實(shí)現(xiàn)這樣的規(guī)則，我們就需要區(qū)分這兩種情況的調(diào)用方式，那么怎么區(qū)分呢？首先返回出去的是 bound 函數(shù)，那么 new 操作符實(shí)例化的就是 bound 函數(shù)。通過上文 “從手寫 new 操作符中去理解 this” 中我們可以知道當(dāng)函數(shù)被 new 進(jìn)行實(shí)例化的時(shí)候， 構(gòu)造函數(shù)內(nèi)部的 this 就是指向?qū)嵗膶?duì)象，那么判斷一個(gè)函數(shù)是否是一個(gè)實(shí)例化的對(duì)象的構(gòu)造函數(shù)時(shí)可以通過 intanceof 操作符判斷。
知識(shí)點(diǎn)： instanceof 運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。
Function.prototype.myBind = function (ctx, ...args) {
// 根據(jù)上文我們可以知道 this 就是調(diào)用的那個(gè)函數(shù)
const self = this
return function bound(...newArgs) {
// new Fn 的時(shí)候， this 是 Fn 的實(shí)例對(duì)象
if(this instanceof Fn) {
return new self(...args, ...newArgs)
}
// 在再次執(zhí)行的的時(shí)候去改變 this 的指向
return self.apply(ctx, [...args, ...newArgs])
}
}另外我們也可以通過上文的實(shí)現(xiàn) new 操作符的代碼來實(shí)現(xiàn) bind 里面的 new 操作。
完整的復(fù)雜版：
Function.prototype.myBind = function (ctx) {
const self = this
if (!Object.prototype.toString.call(self) === '[object Function]') {
throw TypeError('myBind must be called on a function');
}
// 對(duì) context 進(jìn)行深拷貝，防止 bind 執(zhí)行后返回函數(shù)未執(zhí)行期間，context 被修改
ctx = JSON.parse(JSON.stringify(ctx)) || window;
const args = Array.prototype.slice.call(arguments, 1);
/**
* 構(gòu)造函數(shù)生成對(duì)象實(shí)例
* @returns {Object|*}
*/
const create = function (conFn) {
const obj = {};
/* 設(shè)置原型指向，確定繼承關(guān)系 */
obj.__proto__ = conFn.prototype;
/**
* 1、執(zhí)行目標(biāo)函數(shù)，綁定函數(shù)內(nèi)部的屬性
* 2、如果目標(biāo)函數(shù)有對(duì)象類型的返回值則取返回值，符合js new關(guān)鍵字的規(guī)范
*/
const res = conFn.apply(obj, Array.prototype.slice.call(arguments,1));
return typeof res === 'object' && res != null ? res : obj;
};
const bound = function () {
// new 操作符操作的時(shí)候
if (this instanceof bound) {
return create(self, args.concat(Array.prototype.slice.call(arguments)));
}
return self.apply(ctx, args.concat(Array.prototype.slice.call(arguments)));
};
return bound;
};為什么顯式綁定的 this 要比隱式綁定的 this 優(yōu)先級(jí)要高
通過上面的實(shí)現(xiàn)原理，我們就可以理解為什么上面的 this 優(yōu)先級(jí)中通過 call、apply、bind 和 new 操作符的顯式綁定的 this 要比隱式綁定的 this 優(yōu)先級(jí)要高了。例如上面的 obj1.getName.call(obj2) 中的 getName 方法本來是通過 obj1 來調(diào)用的，但通過 call 方法之后，實(shí)際 getName 方法變成了 obj2.getName() 來執(zhí)行了。
總結(jié)
通過本篇內(nèi)容的學(xué)習(xí)，我們看到 this 的用法紛繁多樣，確實(shí)不容易掌握。但總的來說可以總結(jié)為以下幾條規(guī)則：
- 在函數(shù)體中，非顯式或隱式地簡單調(diào)用函數(shù)時(shí)，在嚴(yán)格模式下，函數(shù)內(nèi)的 this 會(huì)綁定到 undefined 上，在非嚴(yán)格模式下則會(huì)被綁定到全局對(duì)象 window/global 上。
- 一般使用 new 方法調(diào)用構(gòu)造函數(shù)時(shí)，構(gòu)造函數(shù)內(nèi)的 this 會(huì)被綁定到新創(chuàng)建的對(duì)象上，且優(yōu)先級(jí)要比 bind 的高。
- 一般通過 call、apply、bind 方法顯式調(diào)用函數(shù)時(shí)，函數(shù)體內(nèi)的 this 會(huì)被綁定到指定參數(shù)的對(duì)象上，顯式綁定的 this 要比隱式綁定的 this 優(yōu)先級(jí)要高。
- 一般通過上下文對(duì)象調(diào)用函數(shù)時(shí)，函數(shù)體內(nèi)的 this 會(huì)被綁定到該對(duì)象上。
- 在箭頭函數(shù)中，this 的指向是由外層（函數(shù)或全局）作用域來決定的。
最后推薦一個(gè)學(xué)習(xí) vue3 源碼的庫，它是基于崔效瑞老師的開源庫 mini-vue 而來，在 mini-vue 的基礎(chǔ)上實(shí)現(xiàn)更多的 vue3 核心功能，用于深入學(xué)習(xí) vue3， 讓你更輕松地理解 vue3 的核心邏輯。
Github 地址：mini-vue3-plus
到此這篇關(guān)于JavaScript中this例題實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)js this例題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中參數(shù)傳遞方式包括按值傳遞、按引用傳遞、參數(shù)解構(gòu)傳遞、Rest參數(shù)傳遞、回調(diào)函數(shù)傳遞、閉包傳遞、模板字符串傳遞和高階函數(shù)傳遞,每種方式都有其特點(diǎn)和適用場(chǎng)景,選擇合適的傳遞方式可以提高代碼的可讀性、可維護(hù)性和靈活性,感興趣的朋友一起看看吧2025-01-01
layui中使用jquery控制radio選中事件的示例代碼
今天小編就為大家分享一篇layui中使用jquery控制radio選中事件的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯唵螌?shí)例介紹
這篇文章主要介紹了Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯唵螌?shí)例介紹的相關(guān)資料,這里附有實(shí)例代碼幫助大家學(xué)習(xí)理解，需要的朋友可以參考下2016-12-12
最近公司的項(xiàng)目中需要在小程序內(nèi)使用echarts組件來展示數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于echart在微信小程序的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
用 javascript 實(shí)現(xiàn)的點(diǎn)擊復(fù)制代碼
用 javascript 實(shí)現(xiàn)的點(diǎn)擊復(fù)制代碼，需要的朋友可以參考一下2007-03-03
在日常?APP?開發(fā)過程中,經(jīng)常要用到數(shù)據(jù)的存儲(chǔ)、獲取和刪除等操作以及頁面導(dǎo)航之間的跳轉(zhuǎn),為此,封裝了一個(gè)兩個(gè)簡單的方法來統(tǒng)一調(diào)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助2023-09-09
JS中跨頁面調(diào)用變量和函數(shù)的方法(例如a.js 和 b.js中互相調(diào)用)
下面小編就為大家?guī)硪黄狫S中跨頁面調(diào)用變量和函數(shù)的方法(例如a.js 和 b.js中互相調(diào)用)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JavaScript模擬實(shí)現(xiàn)簡單的MVC的示例詳解
MVC是一種常見的軟件架構(gòu)模式，MVC模式的目的是將應(yīng)用程序的數(shù)據(jù)、用戶界面和控制邏輯分離，提高代碼的可維護(hù)性，可拓展性和可重用性。本文就來用用JS模擬實(shí)現(xiàn)一個(gè)簡單的MVC吧2023-04-04
所謂“基本類型（primitive types）”的概念ECMAScript（V3，V5）中壓根就沒有，它只是將類型分為6種,感興趣的朋友可以參考下2013-01-01
純js實(shí)現(xiàn)的論壇常用的運(yùn)行代碼的效果
bluidea論壇的腳本板塊的版主寫的，不錯(cuò)，轉(zhuǎn)到這！2008-07-07