溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript中的this實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript中的this實例分析”吧!
我們來看例題：請給出下面代碼的運行結果。
例題1
function f1 () {
console.log(this)
}
f1() // window普通函數在非嚴格的全局環境下調用時，其中的 this 指向的是 window。
例題2
"use strict"
function f1 () {
console.log(this)
}
f1() // undefined用了嚴格模式 "use strict"，嚴格模式下無法再意外創建全局變量，所以 this 不為 window 而為 undefined。
注意：babel 轉成 ES6 的，babel 會自動給 js 文件上加上嚴格模式。
在箭頭函數中，this 的指向是由外層(函數或全局)作用域來決定的。
例題3
const Animal = {
getName: function() {
setTimeout(function() {
console.log(this)
})
}
}
Animal.getName() // window此時 this 指向 window。這里也印證了那句經典的話：“匿名函數的 this 永遠指向 window”。
如果要讓 this 指向 Animal 這個對象，則可以巧用箭頭函數來解決。
例題4
const Animal = {
getName: function() {
setTimeout(() => {
console.log(this)
})
}
}
Animal.getName() // {getName: ?}嚴格模式對箭頭函數沒有效果
例題5
"use strict";
const f1 = () => {
console.log(this)
}
f1() // window我們都知道箭頭函數體內的 this 對象，就是定義時所在的對象，而不是使用時所在的對象。普通函數使用了嚴格模式 this 會指向 undefined 但箭頭函數依然指向了 window。
例題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在對象方法中，作為對象的一個方法被調用時，this 指向調用它所在方法的對象。也就是開頭我們所說的那句：“誰調用了它，它就指向誰”，在這里很明顯是 obj 調用了它。
例題7
const obj = {
name: "coboy",
age: 18,
add: function() {
console.log(this, this.name, this.age)
}
};
const fn = obj.add
fn() // window這個時候 this 則仍然指向 window。obj 對象方法 add 賦值給 fn 之后，fn 仍然在 window 的全局環境中執行，所以 this 仍然指向 window。
例題8
const obj = {
name: "coboy",
age: 18,
add: function() {
function fn() {
console.log(this)
}
fn()
}
};
obj.add() // window如果在對象方法內部聲明一個函數，這個函數的 this 在對象方法執行的時候指向就不是這個對象了，而是指向 window 了。
同樣想要 this 指向 obj 可以通過箭頭函數來實現：
const obj = {
name: "coboy",
age: 18,
add: function() {
const fn = () => {
console.log(this)
}
fn()
}
};
obj.add() // obj再次說明箭頭函數的 this 是由外層函數作用域或者全局作用域決定的。
例題9
const obj = {
name: "coboy",
age: 18,
add: function() {
return this
}
};
console.log(obj.add() === obj) // true參考上文我們很容易知道 this 就是指向 obj 對象本身，所以返回 true。
例題10
const animal = {
name: "coboy",
age: 18,
dog: {
name: 'cobyte',
getName: function() {
console.log(this.name)
}
}
};
animal.dog.getName() // 'cobyte'如果函數中的 this 是被上一級的對象所調用的，那么 this 指向的就是上一級的對象，也就是開頭所說的：“誰調用了它，它就指向誰”。
例題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())三個最終都打印了coboy1。
執行 obj3.getName 里面返回的是 obj2.getName 里面返回的結果，obj2.getName 里面返回的是 obj1.getName 的結果，obj1.getName 返回的結果就是 '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())這個時候輸出了 coboy1, coboy1, undefined。
最后一個其實在上面例題5中已經有說明了。通過 const fn = obj1.getName 的賦值進行了“裸奔”調用，因此這里的 this 指向了 window,運行結果當然是 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())上述方法同樣說明了那個重要的結論：this 指向最后調用它的對象。
我們將函數 obj1 的 getName 函數掛載到了 obj2 的對象上，getName 最終作為 obj2 對象的方法被調用。
通過 new 操作符來構建一個構造函數的實例對象，這個構造函數中的 this 就指向這個新的實例對象。同時構造函數 prototype 屬性下面方法中的 this 也指向這個新的實例對象。
例題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'在構造函數中出現顯式 return 的情況。
例題15
function Animal(){
this.txt = 'coboy'
const obj = {txt: 'cobyte'}
return obj
}
const a1 = new Animal();
console.log(a1.txt) // cobyte此時 a1 返回的是空對象 obj。
例題16
function Animal(){
this.txt = 'coboy'
return 1
}
const a1 = new Animal();
console.log(a1.txt) // 'coboy'由此可以看出，如果構造函數中顯式返回一個值，且返回的是一個對象，那么 this 就指向返回的對象，如果返回的不是一個對象，而是基本類型，那么 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 方法的區別
例題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 主要區別是在傳參上。apply 方法與 call 方法用法基本相同，不同點主要是 call() 方法的第二個參數和之后的參數可以是任意數據類型，而 apply 的第二個參數是數組類型或者 arguments 參數集合。
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 指向，不過調用 bind() 方法不會執行 getName()函數，也不會改變 getName() 函數本身，只會返回一個已經修改了 this 指向的新函數，這個新函數可以賦值給一個變量，調用這個變量新函數才能執行 getName()。
call() 方法和 bind() 方法的區別在于
bind 的返回值是函數，并且不會自動調用執行。
兩者后面的參數的使用也不同。call 是 把第二個及以后的參數作為原函數的實參傳進去， 而 bind 實參在其傳入參數的基礎上往后獲取參數執行。
例題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,200我們通常把通過 call、apply、bind、new 對 this 進行綁定的情況稱為顯式綁定，而把根據調用關系確定 this 指向的情況稱為隱式綁定。那么顯示綁定和隱式綁定誰的優先級更高呢？
例題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 的顯示綁定比隱式綁定優先級更高些。
例題23
function getName(name) {
this.txt = name
}
const obj1 = {}
const newGetName = getName.bind(obj1)
newGetName('coboy')
console.log(obj1) // {txt: "coboy"}當再使用 newGetName 作為構造函數時。
const obj2 = new newGetName('cobyte')
console.log(obj2.txt) // 'cobyte'這個時候新對象中的 txt 屬性值為 'cobyte'。
newGetName 函數本身是通過 bind 方法構造的函數，其內部已經將this綁定為 obj1,當它再次作為構造函數通過 new 被調用時，返回的實例就已經和 obj1 解綁了。也就是說，new 綁定修改了 bind 綁定中的 this 指向，所以 new 綁定的優先級比顯式 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(引用箭頭函數) 中的 this 也會綁到 obj1 上，箭頭函數的綁定無法被修改。
例題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 聲明的變量不會掛到 window 全局對象上，所以 this 指向 window 時，自然也找不到 txt 變量了。
例題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 也會綁定到 obj1 上， 箭頭函數的綁定無法被修改。
例題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 聲明的變量不會掛載到 window 全局對象上。因此，this 指向 window 時，自然也找不到 txt 變量了。
有一道經典的面試題，JS 的 new 操作符到底做了什么？
創建一個新的空對象
把這個新的空對象的隱式原型（__proto__）指向構造函數的原型對象（prototype）
把構造函數中的 this 指向新創建的空對象并且執行構造函數返回執行結果
判斷返回的執行結果是否是引用類型，如果是引用類型則返回執行結果，new 操作失敗，否則返回創建的新對象
/*
create函數要接受不定量的參數，第一個參數是構造函數（也就是new操作符的目標函數），其余參數被構造函數使用。
new Create() 是一種js語法糖。我們可以用函數調用的方式模擬實現
*/
function create(Fn,...args){
// 1、創建一個空的對象
let obj = {}; // let obj = Object.create({});
// 2、將空對象的原型prototype指向構造函數的原型
Object.setPrototypeOf(obj,Fn.prototype); // obj.__proto__ = Fn.prototype
// 以上 1、2步還可以通過 const obj = Object.create(Fn.prototype) 實現
// 3、改變構造函數的上下文（this）,并將參數傳入
let result = Fn.apply(obj,args);
// 4、如果構造函數執行后，返回的結果是對象類型，則直接將該結果返回，否則返回 obj 對象
return result instanceof Object ? result : obj;
// return typeof result === 'object' && result != null ? result : obj
}一般情況下構造函數沒有返回值，但是作為函數，是可以有返回值的，這就解析了上面例題15和例題16的原因了。 在 new 的時候，會對構造函數的返回值做一些判斷：如果返回值是基礎數據類型，則忽略返回值，如果返回值是引用數據類型，則使用 return 的返回，也就是 new 操作符無效。
Function.prototype.myCall = function (context, ...args) {
context = context || window
// 創建唯一的屬性防止污染
const key = Symbol()
// this 就是綁定的那個函數
context[key] = this
const result = context[key](...args)
delete context[key]
return result
}myCall 中的 this 指向誰？
myCall 已經設置在 Function 構造函數的原型對象（prototype）上了，所以每個函數都可以調用 myCall 方法，比如函數 Fn.myCall()，根據 this 的確定規律：“誰調用它，this 就指向誰”，所以myCall方法內的 this 就指向了調用的函數，也可以說是要綁定的那個函數。
Fn.myCall(obj) 本質就是把函數 Fn 賦值到 對象 obj 上，然后通過對象 obj.Fn() 來執行函數 Fn，那么最終又回到那個 this 的確定規律：“誰調用它，this 就指向誰”，因為對象 obj 調用了 Fn 所以 Fn 內部的 this 就指向了對象 obj。
apply 的實現跟 call 的實現基本是一樣的，因為他們的使用方式也基本一樣，只是傳參的方式不一樣。apply 的參數必須以數組的形式傳參。
Function.prototype.myApply = function (context, args) {
if(!Array.isArray(args)) {
new Error('參數必須是數組')
}
context = context || window
// 創建唯一的屬性防止污染
const key = Symbol()
// this 就是綁定的那個函數
context[key] = this
const result = context[key](...args)
delete context[key]
return result
}bind 和 call、apply 方法的區別是它不會立即執行，它是返回一個改變了 this 指向的函數，在綁定的時候可以傳參，之后執行的時候，還可以繼續傳參數數。這個就是一個典型的閉包行為了，是不是。
我們先來實現一個簡單版的：
Function.prototype.myBind = function (ctx, ...args) {
// 根據上文我們可以知道 this 就是調用的那個函數
const self = this
return function bound(...newArgs) {
// 在再次執行的的時候去改變 this 的指向
return self.apply(ctx, [...args, ...newArgs])
}
}但是，就如之前在 this 優先級分析那里所展示的規則：bind 返回的函數如果作為構造函數通過 new 操作符進行實例化操作的話，綁定的 this 就會實效。
為了實現這樣的規則，我們就需要區分這兩種情況的調用方式，那么怎么區分呢？首先返回出去的是 bound 函數，那么 new 操作符實例化的就是 bound 函數。通過上文 “從手寫 new 操作符中去理解 this” 中我們可以知道當函數被 new 進行實例化的時候， 構造函數內部的 this 就是指向實例化的對象，那么判斷一個函數是否是一個實例化的對象的構造函數時可以通過 intanceof 操作符判斷。
知識點： instanceof 運算符用于檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。
Function.prototype.myBind = function (ctx, ...args) {
// 根據上文我們可以知道 this 就是調用的那個函數
const self = this
return function bound(...newArgs) {
// new Fn 的時候， this 是 Fn 的實例對象
if(this instanceof Fn) {
return new self(...args, ...newArgs)
}
// 在再次執行的的時候去改變 this 的指向
return self.apply(ctx, [...args, ...newArgs])
}
}另外我們也可以通過上文的實現 new 操作符的代碼來實現 bind 里面的 new 操作。
完整的復雜版：
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');
}
// 對 context 進行深拷貝，防止 bind 執行后返回函數未執行期間，context 被修改
ctx = JSON.parse(JSON.stringify(ctx)) || window;
const args = Array.prototype.slice.call(arguments, 1);
/**
* 構造函數生成對象實例
* @returns {Object|*}
*/
const create = function (conFn) {
const obj = {};
/* 設置原型指向，確定繼承關系 */
obj.__proto__ = conFn.prototype;
/**
* 1、執行目標函數，綁定函數內部的屬性
* 2、如果目標函數有對象類型的返回值則取返回值，符合js new關鍵字的規范
*/
const res = conFn.apply(obj, Array.prototype.slice.call(arguments,1));
return typeof res === 'object' && res != null ? res : obj;
};
const bound = function () {
// new 操作符操作的時候
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 優先級中通過 call、apply、bind 和 new 操作符的顯式綁定的 this 要比隱式綁定的 this 優先級要高了。例如上面的 obj1.getName.call(obj2) 中的 getName 方法本來是通過 obj1 來調用的，但通過 call 方法之后，實際 getName 方法變成了 obj2.getName() 來執行了。
到此，相信大家對“JavaScript中的this實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
