摘要:兩個參數在中新增了該方法也是強制更改指向而改變的指向,返回的是函數但是和的區別是更改后不會立即執行,它會返回一個新函數。
this是Javascript語言的一個關鍵字。
它代表函數運行時,自動生成的一個內部對象。比如,
function test() { this.x = 1; }
this 是當前執行上下文中的一部分。
this永遠指向函數的調用者。
隨著函數使用場合的不同,this的值會發生變化。但是有一個總的原則,那就是this指的是,調用函數的那個對象。
a.如果是一般函數,this指向全局對象window;
b.在嚴格模式下"use strict",為undefined.
c.對象的方法里調用,this指向調用該方法的對象.
d.構造函數里的this,指向創建出來的實例.
e.在事件處理函數中,this指向觸發事件的DOM對象
//a function bar() { console.log(this);//一般函數,this指向全局對象window } bar(); //b var foo = function() { "use strict"; console.log(this);//表示使用嚴格模式;在嚴格模式下,為undefined } foo(); //c var name = "tesla"; var car = { name:"bmw", drive: function() { console.log(this); //object car console.log(this.name); //bmw var that = this;//定義一個that變量來存儲this的值 setTimeout(function(){ //setTimeout是全局函數 console.log(this); //window console.log(this.name); //tesla console.log(that); //object car console.log(that.name); //bmw },1000); } } car.drive(); //d var name = "tom"; //聲明一個函數 function person() { console.log(arguments.length); this.name = arguments[0]; this.age = arguments[1]; console.log(this); console.log(this.name); console.log(this.age); } person(); //0 window undefined undefined var tom = new person("amy",20); //2 person -> tom amy 20 //e //先遍歷 ".tr-s" $(".tr-s").each(function (index,item) { //再遍歷 ".tr-s" 下的 "td-t" $(this).find(".td-t").each(function (index_s,item_s) { //index_s 是下標 //item_s 是對應的對象 }) })2.改變this的指向
在JS中一切皆對象,函數也是對象,既然是對象就有屬性和方法,在JS中所有的方法都有兩個方法call(),apply()
我們可以使用這兩個方法來顯示更改函數中this的指向,
call、apply這兩個函數的共同特點:改變并立即執行。
區別就是傳參方式不同
call是一個一個傳入
apply是傳入一個數組,一次性傳完。
.call(), call(thisScope, arg1, arg2, arg3...)
.apply(), apply(thisScope, [arg1, arg2, arg3...]);兩個參數
在ES5中新增了bind(),該方法也是強制更改this指向
而bind 改變this的指向,返回的是函數
.bind() bind(thisScope, arg1, arg2, arg3...)
但是bind和call、apply的區別是bind更改this后不會立即執行,它會返回一個新函數。
bind傳參也是一個一個的傳入
var obj = { name:"tom", age:20 } function show(a,b){ console.log(a,b); } //獨立調用 show(1,2); //強制更改this指向為obj 并立即執行該函數 show.call(obj,1,2); show.apply(obj,[1,2]); //強制更改this指向obj,不會立即執行,它會返回一個新函數,需要主動去執行這個函數 show.bind(obj,1,2)();
箭頭函數的this
我們使用foo函數的call方法改變了foo函數調用時函數體內this的指向({id: 42}這個對象),但setTimeout回調函數中的this依舊指向window對象(因為在全局環境中運行)。
普通函數
function foo() { console.log("id1:", this.id); console.log("this1:", this); setTimeout(function() { console.log("id2:", this.id); console.log("this2:", this); }, 0); } var id = 21; foo(); // id1: 21 ; this1: window ; id2: 21 ; this2: window foo.call({id: 42}); // id1: 42 ; this1: {id: 42} ; id2: 21 ; this2: window
箭頭函數
function foo() { console.log("id1:", this.id); console.log("this1:", this); setTimeout(() =>{ console.log("id2:", this.id); console.log("this2:", this); }, 0); } var id = 21; foo(); // id1: 21 ; this1: window ; id2: 21 ; this2: window foo.call({id: 42}); // id1: 42 ; this1: {id: 42} ; id1: 42 ; this1: {id: 42}
在這里直接給出結論:
箭頭函數根本沒有自己的this,導致內部的this指向了外層代碼的this,這個指向在定義時就已經確定而不會在調用時指向其執行環境的(變量)對象。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102217.html
摘要:調用在中,通過的形式調用一個構造函數,會創建這個構造函數實例,而這個實例的指向創建的這個實例。如下例所示,在構造函數內部使用并沒有改變全局變量的值。顯然,箭頭函數是不能用來做構造函數。 關于javascript中this指向的問題,現總結如下,如有不正確,歡迎指正。 javascript中,this的指向并不是在函數定義的時候確定的,而是在其被調用的時候確定的。也就是說,函數的...
摘要:其中和在傳入要綁定的指向時,立即執行。需要注意的是,當使用改變函數內部的指向時如果傳入的不是一個對象,會調用相對的構造函數,進行隱式類型裝換。 關于javascript中this指向的總結 瀏覽器環境 在全局作用域中,this的指向是window對象 console.log(this); //Window對象 console.log(this === window); //true E...
摘要:返回的新函數調用時也可以向原函數傳遞實參,這里就涉及順序問題。返回的新函數被當成構造函數調用函數后返回的新函數,也可以被當做構造函數。使用,以原函數作為新對象的原型創建對象測試打印打印函數源碼已實現完成,希望對你有幫助。 bind函數 bind 函數掛在 Function 的原型上 Function.prototype.bind 創建的函數都可以直接調用 bind,使用: fu...
摘要:函數的幾種調用方式普通函數調用作為方法來調用作為構造函數來調用使用方法來調用方法箭頭函數但是不管函數是按哪種方法來調用的,都需要記住一點誰調用這個函數或方法關鍵字就指向誰。作為構造函數來調用構造函數出來的實例,指向這個實例對象。 首先,了解一下this關鍵字。this關鍵字就涉及到函數調用的內容。函數的幾種調用方式: 1 普通函數調用2 作為方法來調用3 作為構造函數來調用4 使用ap...
閱讀 2014·2021-11-15 11:38
閱讀 2048·2019-08-30 15:55
閱讀 2182·2019-08-30 15:52
閱讀 3167·2019-08-30 14:01
閱讀 2684·2019-08-30 12:47
閱讀 1129·2019-08-29 13:17
閱讀 1062·2019-08-26 13:55
閱讀 2629·2019-08-26 13:46