前端知識小節--js中改變this指向的三種方式
阿新 • • 發佈：2018-12-26
在寫程式碼完成專案的過程中我們經常會遇到需要改變this指向來實現功能的時候，以下三種方式是常用的改變this指向的方法：
1.call
call中的引數有多個，如：
aa.call(obj,num1,num2);
obj是函式執行的作用域，num1,num2是要給函式傳的引數；
以下是call方法的測試：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function aa(num1,num2) { console.log(this,num1,num2); console.log(this.name); } aa(1,2); var obj={ name:'張三' } aa.call(obj,1,2); </script> </body> </html>
2.apply
apply中的引數有兩個，如：
aa.apply(obj,[num1,num2]);
obj是函式執行的作用域，num1,num2是要給函式傳的引數,與call不同apply要以陣列的形式穿參。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function aa(num1,num2) { console.log(this,num1,num2); console.log(this.name); } aa(1,2); var obj={ name:'張三' } aa.apply(obj,[3,4]) </script> </body> </html>
執行結果如下：
3.bind
bind擁有多個引數，如：
aa.bind(obj,num1,num2)();
obj是函式執行的作用域，num1,num2是要給函式傳的引數,與call不同則是需要在後面加上（）來呼叫。
以下附上程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function aa(num1,num2) { console.log(this,num1,num2); console.log(this.name); } aa(1,2); var obj={ name:'張三' } aa.bind(obj,5,6)(); </script> </body> </html>
執行結果如下：
希望以上內容對大家的學習有所幫助！！！