摘要:一前言指向,,,的區(qū)別是一個經(jīng)典的面試問題,同時在項目中會經(jīng)常使用到的原生的方法。中可能會極大的避免了產(chǎn)生的錯誤,有時候需要維護老的項目還是有必要了解一下的指向和,,三者的區(qū)別。
一、前言
this指向,apply,call,bind的區(qū)別是一個經(jīng)典的面試問題,同時在項目中會經(jīng)常使用到的原生的js方法。同時也是ES5中的眾多坑的一個。ES6中可能會極大的避免了this產(chǎn)生的錯誤,有時候需要維護老的項目還是有必要了解一下this的指向和apply,call,bind三者的區(qū)別。
二、this的指向在ES5中,其實this的指向,始終堅持一個原理:this永遠指向最后一個調(diào)用它的那個對象。
首先我們看一個栗子1:
var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:" + this); // inner: Window } a(); console.log("outer:" + this) // outer: Window
輸出windowsName,是因為“this永遠指向最后調(diào)用它的那個對象”,我們看到調(diào)用a的地方a(),前面沒有調(diào)用的對象那么就是全局對象window,就是全局對象調(diào)用a(),相當于window.a()。
如果使用嚴格模式,全局對象就是undefined,會報錯name of undefined
栗子2:
var name = "windowsName"; var a = { name: "Cherry", fn : function () { console.log(this.name); // Cherry } } a.fn();
在這個栗子中,函數(shù)fn是對象a調(diào)用的,所以console是a中的name
栗子3:
var name = "windowsName"; var a = { name: "Cherry", fn : function () { console.log(this.name); // Cherry } } window.a.fn();
這個栗子中,記住“this永遠指向最后一個調(diào)用它的那個對象”,調(diào)用fn的對象有window,a,但是最后調(diào)用fn是a對象,所以this指向?qū)ο骯中的name。
栗子4:
var name = "windowsName"; var a = { // name: "Cherry", fn : function () { console.log(this.name); // undefined } } window.a.fn();
為啥undefined,調(diào)用fn的對象有:window,a,最后一個調(diào)用fn是a,但是a中沒有對那么進行定義,也不會繼續(xù)向上一個對象尋找 this.name,而是直接輸出 undefined,所以this.name為undefined。
栗子5(比較坑):
var name = "windowsName"; var a = { name : null, // name: "Cherry", fn : function () { console.log(this.name); // windowsName } } var f = a.fn; f();
這個栗子比較坑,為啥 不是null,因為雖然將a對象的fn方法賦值給變量f,但是沒有調(diào)用,“this永遠執(zhí)行最后一個調(diào)用ta的那個對象”,由于剛剛的f沒有調(diào)用,所以fn()最后仍然是被window調(diào)用的,所以this指向的也就是window。
注意:this的指向并不是在創(chuàng)建的時候可以確定,在ES5中,永遠都是this永遠指向最后調(diào)用它的那個對象。
栗子6:
var name = "windowsName"; function fn() { var name = "Cherry"; innerFunction(); function innerFunction() { console.log(this.name); // windowsName } } fn()三、怎樣改變this的指向
改變this的指向,我總結(jié)以下的方法:
(1)使用ES6中箭頭函數(shù)
(2)函數(shù)內(nèi)部使用_this = this
(3)使用apply,call,bind方法
(4)new實例化一個對象
舉個栗子7:
var name = "windowsName"; var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() },100); } }; a.func2() // this.func1 is not a function
在這個栗子中,不使用箭頭函數(shù)情況下,會報錯的,因為最后調(diào)用setTimeout的對象時window,但是在window并沒有func1函數(shù)。
我們改變this的指向這一節(jié)將吧這個栗子作為demo進行改造。
1、ES6中的箭頭函數(shù)眾所周知,ES6的箭頭函數(shù)是可以避免ES5中this的坑,箭頭函數(shù)的this始終指向函數(shù)定義時候的this,而并不是執(zhí)行時候。箭頭函數(shù)需要記住這句話:“箭頭函數(shù)沒有this綁定,必須通過查找作用域來決定其值,如果箭頭函數(shù)被非箭頭函數(shù)包含,則this的綁定的是最近一層非箭頭函數(shù)的this,否則,this為undefined”
栗子8:
var name = "windowsName"; var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout( () => { this.func1() },100); } }; a.func2() // Cherry2、在函數(shù)內(nèi)部使用_this = this
在不使用ES6中,那么這種方式應(yīng)該是最簡單的不會出錯的方式,我們先將調(diào)用這個函數(shù)的對象保存在變量_this中,然后在函數(shù)中都使用這個_this,這樣_this就不會改變了。
栗子9:
var name = "windowsName"; var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { var _this = this; setTimeout( function() { _this.func1() },100); } }; a.func2() // Cherry
在func2中,首先設(shè)置var _this = this,這里this是調(diào)用func2的對象a,為了防止在func2中的setTimeout被window調(diào)用而導(dǎo)致的在setTimeout中的this為window。我們將this賦值給一個變量_this,這樣在func2中我們使用_this就是指向?qū)ο骯了。
3、使用apply栗子10:
var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() }.apply(a),100); } }; a.func2() // Cherry
在栗子中,apply()方法調(diào)用一個函數(shù),其具有一個指定的this值,以及作為一個數(shù)組(或者類似數(shù)組的對象)提供的參數(shù),fun.apply(thisArg, [argsArray])
thisArg:在fun函數(shù)運行時指定的this值。指定this的值并不一定是函數(shù)執(zhí)行時真正的this值,如果是原始值的this會指向該原始值的自動包裝對象。
argsArray:一個數(shù)組或者類數(shù)組對象,其中的數(shù)組元素將作為多帶帶的參數(shù)傳給fun函數(shù)。參數(shù)為null或者undefined,則表示不需要傳入任何參數(shù)。
4、使用call栗子11:
var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() }.call(a),100); } }; a.func2() // Cherry
在栗子中,call()方法調(diào)用一個函數(shù),其具有一個指定的this值,以及若干個參數(shù)列表,fun.call(thisArg, arg1, arg2, ...)
thisArg:在fun函數(shù)運行時指定的this值。指定this的值并不一定是函數(shù)執(zhí)行時真正的this值,如果是原始值的this會指向該原始值的自動包裝對象。
arg1, arg2, ...:若干個參數(shù)列表
5、使用bind栗子12:
var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() }.bind(a)(),100); } }; a.func2() // Cherry
在栗子中,bind()方法創(chuàng)建一個新的函數(shù),當被調(diào)用時,將其this的關(guān)鍵字設(shè)置為提供的值,在調(diào)用新函數(shù)時,在任何提供一個給定的參數(shù)序列。
bind創(chuàng)建了一個新函數(shù),必須手動去調(diào)用。
四、apply,call,bind區(qū)別 1、apply和call的區(qū)別apply和call基本類似,他們的區(qū)別只是傳入的參數(shù)不同。apply傳入的參數(shù)是包含多個參數(shù)的數(shù)組,call傳入的參數(shù)是若干個參數(shù)列表。
栗子13:
var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b); console.log( this.name ); } } var b = a.fn; b.apply(a,[1,2]) // 3 Cherry
栗子14:
var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b); console.log( this.name ); } } var b = a.fn; b.call(a,1,2) // 3 Cherry2、bind和apply、call區(qū)別
bind方法會創(chuàng)建一個新的函數(shù),當被調(diào)用的時候,將其this關(guān)鍵字設(shè)置為提供的值,我們必須手動去調(diào)用。
var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b); console.log( this.name ); } } var b = a.fn; b.bind(a,1,2)() //3 //Cherry
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104577.html
摘要:參考鏈接在中,和是對象自帶的三個方法,都是為了改變函數(shù)體內(nèi)部的指向。返回值是函數(shù)方法不會立即執(zhí)行,而是返回一個改變了上下文后的函數(shù)。而原函數(shù)中的并沒有被改變,依舊指向全局對象。原因是,在中,多次是無效的。 參考鏈接:https://juejin.im/post/59bfe8... 在JavaScript中,call、apply和bind是Function對象自帶的三個方法,都是為了改變...
摘要:如果連續(xù)呢結(jié)果會是什么結(jié)果還是第一個原因是,在中,多次是無效的。更深層次的原因,的實現(xiàn),相當于使用函數(shù)在內(nèi)部包了一個,第二次相當于再包住第一次故第二次以后的是無法生效的。 this 1.其實js中的this沒那么難理解,當找不到this時記住一句話:誰調(diào)我,我就指誰!new 誰指誰 function text1(){ console.log(this); //指wind...
摘要:的作用在中,三者作用是改變某個函數(shù)的執(zhí)行上下文,具體作用是改變函數(shù)體內(nèi)部的指向。 apply、call、bind的作用 在javascript中,三者作用是改變某個函數(shù)的執(zhí)行上下文(Execution Context),具體作用是改變函數(shù)體內(nèi)部this的指向。 舉個栗子: function example() {} example.prototype = { name: wil...
摘要:理解文章中已經(jīng)比較全面的分析了在中的指向問題,用一句話來總結(jié)就是的指向一定是在執(zhí)行時決定的,指向被調(diào)用函數(shù)的對象。與和直接執(zhí)行原函數(shù)不同的是,返回的是一個新函數(shù)。這個新函數(shù)包裹了原函數(shù),并且綁定了的指向為傳入的。 理解 JavaScript this 文章中已經(jīng)比較全面的分析了 this 在 JavaScript 中的指向問題,用一句話來總結(jié)就是:this 的指向一定是在執(zhí)行時決定的,...
摘要:是的,始終指向調(diào)用對象,調(diào)用對象,這個很重要,的靜態(tài)成員是沒有的概念的。所以和,的區(qū)別是返回一個明確的新函數(shù),和立即執(zhí)行了。 1. 問題引入 function A() {} A.prototype.fna = function() { console.log(this); } 我的問題是 fna 的 this 是指向哪里的? var a = new A(); a.fna(); ...
閱讀 1675·2021-11-15 11:37
閱讀 3408·2021-09-28 09:44
閱讀 1649·2021-09-07 10:15
閱讀 2784·2021-09-03 10:39
閱讀 2686·2019-08-29 13:20
閱讀 1291·2019-08-29 12:51
閱讀 2204·2019-08-26 13:44
閱讀 2125·2019-08-23 18:02