資訊專欄INFORMATION COLUMN
摘要：中只有的作用域是動態(tài)作用域的五種綁定初學時，會想當然認為遵循某一條規(guī)律，就像物理學那樣，然而并不是。的綁定分為五種情況，這五種情況之間毫無規(guī)律可言。以至指向更加撲朔迷離。
this 到底指向哪里
以下如果沒提及，則為嚴格模式。
js中作用域有兩種:
詞法作用域
動態(tài)作用域
詞法作用域詞法作用域指在書寫代碼時就被確定的作用域。
看如下代碼
var value = 1;
function foo() {
console.log(value);
}
function bar() {
var value = 2;
foo();
}
bar();// 結果是1
動態(tài)作用域
動態(tài)作用域指在代碼運行時才被確定的作用域。
js中只有this的作用域是動態(tài)作用域
初學js時，會想當然認為this遵循某一條規(guī)律，就像物理學那樣，然而并不是。
this的綁定分為五種情況，這五種情況之間毫無規(guī)律可言。不過好在都很簡單。
當以如下形式執(zhí)行一個函數(shù)時，this為默認綁定；
func()
嚴格模式下，this為undefined
非嚴格模式下，this是全局對象。
與函數(shù)調用嵌套多少層如何嵌套無關
/* 全是undefined */
function printThis(){
return this
}
var obj = {
say(){
console.log("obj.say",printThis())
}
}
function funcB(){
console.log("funcB",printThis());
obj.say();
}
console.log("funcA",printThis())
obj.say()
funcB()
二. 隱式綁定
當以如下行駛執(zhí)行一個函數(shù)時，this為隱式綁定；
a.b.func()
此時this指向點前面一個對象
賦值會改變隱式綁定this的指向方法賦值給變量
class T {
dotInvoke() {
console.log("dotInvoke", this.sayThis())
}
sayThis() {
return this
}
assignInvoke() {
var sayThis = this.sayThis;
console.log("assignInvoke", sayThis())
}
}
var tt = new T();
tt.dotInvoke()// 指向T
tt.assignInvoke()// undefined
函數(shù)被賦值成方法
function printThis(){
return this
}
var obj = {};
obj.say = printThis;
obj.say()/* 指向obj */
賦值給參數(shù)
極為常見的是回調函數(shù)的this是undefined，因為回調函數(shù)被復制給參數(shù)，參數(shù)再調用時變成了默認綁定
function asyncFun(cb){
cb()
}
var obj = {
callback(){
console.log(this)
}
}
obj.callback()/*隱式綁定 obj */
asyncFun(obj.callback);/*默認綁定 undefined */
三. 箭頭函數(shù)
箭頭函數(shù)會讓this指向最近的函數(shù)或全局作用域
與最近的函數(shù)的this指向相同
function foo() {
// 返回一個箭頭函數(shù)
return (a)=>{
//this 繼承自 foo()
return this.a
}
;
}
var obj1 = {
a: "obj1"
};
var obj2 = {
a: "obj2"
}
var arrow1 = foo.call(obj1);
var arrow2 = foo.call(obj2);
var arrow3 = foo();
console.log("arrow1",arrow1())/* obj1 */
console.log("arrow2",arrow2())/* obj2 */
console.log("arrow3",arrow3())/* undefined,嚴格模式下報錯 */
指向全局
var printThis = ()=>this;
console.log("printThis",printThis());/* global */
指向實例
class Test {
printThis = ()=>{
return this
}
}
//會被babel翻譯成
var test = function test() {
var _this = this;
this.printThis = function () {
return _this;
};
};
四. 顯示綁定
call, apply, bind指定this指向
五. new綁定構造函數(shù)，ES6中的class總結
new構造函數(shù)，new class時，this指向實例
五種綁定，后面兩種情況單一，前面兩種會因為方法，函數(shù)被賦值而互相轉化。
因為this處于動態(tài)作用域，而目前開發(fā)時又大量使用框架。我們寫下的代碼，并不總是由我們自己調用，而是被打包工具打包后，由框架調用。導致我們并不知道我們寫下的函數(shù)和方法是否被框架復制過或顯示綁定過而改變了this指向。以至this指向更加撲朔迷離。
寫完本文頓時覺得，python里指向明確的self完爆js的this。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/100616.html
摘要：的五種不同情形默認情況在默認的，純粹的函數(shù)調用時，視作全局性調用，此時的指向全局對象，在瀏覽器環(huán)境下，也即對象。構造函數(shù)當一個函數(shù)被當做構造函數(shù)，用關鍵字新建一個對象的時候，這個函數(shù)內(nèi)部的以及原型鏈上的都會指向這個新建的對象。 this的五種不同情形 默認情況 在默認的，純粹的函數(shù)調用時，視作全局性調用，此時的this指向全局對象Global，在瀏覽器環(huán)境下，也即window對象。 ...
好久沒有更新了，最近學習的過程中一直在用聯(lián)想的思維來去看問題，javascript是一門非常靈活的語言，集合了好多語言的特性和多種編程模式，對于compose的實現(xiàn)，就有非常多的思路，每一種思路都有自己的特點，實現(xiàn)之后，有種殊途同歸的快感。下面就是我總結的實現(xiàn)compose函數(shù)的五種思路。 面向過程 函數(shù)組合（reduce） 函數(shù)交織（AOP編程） Promise（sequence） Gener...
摘要：在中由于業(yè)務的需要我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理在這里我總結了幾大經(jīng)過驗證，穩(wěn)定好用的方式給大家導航傳值推薦指數(shù)適用范圍相鄰頁面間傳值兼容性原理為頁面的上掛載了對象可用來做路由跳轉，在做頁面跳轉時可以攜帶參數(shù)回調方 在React Native 中由于業(yè)務的需要, 我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理, 在這里我總結了幾大經(jīng)過驗證，穩(wěn)定好用的...
摘要：假設高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應的五種方法頁面布局題目假設高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應的五種方法 HTML CSS 頁面布局 題目：假設高度已知，請寫出三欄布局，其中左欄、右欄各為300px...
閱讀 3807·2023-04-25 22:43
閱讀 3833·2021-09-06 15:15
閱讀 1391·2019-08-30 15:54
閱讀 3721·2019-08-30 14:20
閱讀 2951·2019-08-29 17:16
閱讀 3261·2019-08-29 15:28
閱讀 3454·2019-08-29 11:08
閱讀 1149·2019-08-28 18:05
