javascript基礎 預編譯 this指向

2021-09-22 21:02:05 字數 2560 閱讀 6456

預編譯發生在函式執行前一刻,可以拆分成一下幾步

1、生成activation object 即ao物件(執行期上下文)

2、查詢形參和變數,並將其作為ao物件的屬性,值為undefined

3、將實參的值賦給形參

4、在函式體內查詢函式宣告,並將值賦予函式體

看看下面的例子:

function fn(a)  

var a = 123;

function a () {}

console.log(a) // a => 123

var b = function () {}

console.log(d) // undefined

if (false) // 只提公升了變數宣告,值未賦予函式體

}var d = 456;

console.log(d); // 456

console.log(b); // functionn(){}

}fn(1);

根據以下四步不難得出結果:

第一步 和 第二步:

ao 第三部:

ao 第四步:

ao ,

b: undefined, // var b=function(){} 是函式表示式不是函式宣告

d: function(){}

}

特殊的情況

if(false)

}console.log(test) // undefined

輸出的值是undefined,而不是報錯 test is not a function,這表示函式宣告提公升了,但值沒有提公升

常用普通函式體中的this指向是誰呼叫指向誰,是在執行時確定,不呼叫就指向window

this.a = 20;

var test =

}test.init(); // test 呼叫 init ,則init內部的this指向test

建構函式內部的this指向產生的例項

a = 1

function test ()

test.prototype.a = 2;

test(); // window呼叫test,this指向window a=1

new test(); // this指向例項物件 test{} a = 2 原型鏈上查詢

es6 箭頭函式中的this指向是在定義時確定的,this為箭頭函式所在的詞法作用域的this(通俗好理解的說法:this指向包含箭頭函式最近的函式中的this,若沒有父級函式包裹,則指向this)

var tt = 

say();

}}function demo()

say();

}demo(); // demo中的this為window,則say中的this為window

new demo();// 例項化時demo的指向為demo例項,則say中的this指向demo{}

window.a = 1;

function test()

var obj =

test(); // 1

test.bind(obj)() // 2 此種繫結方法稱為硬繫結

test.bind(null) // 此為軟繫結

值得注意的是es6的函式寫法使用bind的方式後,是不支援new的,會提示 is not a constructor,普通函式可以new,但會使繫結的this失效

this.a = 20;

var o = ,

bar()

}var f = o.foo.bind();

new f(); // 111 undefined => new 對bind失效,導致this不為,而是foo{}

var b = o.bar.bind({});

new b(); // 報錯 b is not a constructor

補充乙個知識點,嚴格模式下也會控制this的指向

嚴格模式下,在全域性作用域中的this,指向window;

"use strict";

console.log("this === window",this === window); // true

全域性作用域中的函式中的this為undefined

"use strict";

function f1()

function demo()

對於建構函式中的this,指向例項自身

function demo() 

}new demo();

'use strict』寫在函式外(非全域性),不影響函式中的this

function demo1() 

(function())();

JavaScript預編譯(函式)

知識點預習 1 js檔案的執行三部曲 語法分析 預編譯 解釋執行。2 變數未經宣告就使用,系統會報錯。3 var aa 夫 子 變數的宣告和賦值,aa為變數名,夫 子 是變數值。var aa是變數的宣告,aa 夫 子 是變數賦值。4 函式宣告 function demo 函式表示式 var demo...

javascript的預編譯階段

1.變數與函式 在js中宣告乙個變數有let const var三種方式,函式有宣告函式和函式表示式兩種。2.預編譯階段做的事情 在預編譯階段,所有的var宣告的變數會被初始化為undefined,所有的宣告函式會用它的定義進行初始化,而const let宣告的變數則不會在預編譯階段執行初始化,函式...

javascript預編譯原理和例子

先看 alert typeof vv var vv variable function vv alert vv script 執行結果是 function 和 variable 照理說,一開始,vv有變數宣告,有vv函式的函式宣告,但vv的函式宣告覆蓋了變數宣告,所以typeof vv為 funct...