js執行環境

zgbgx 發布于2019-08-22 16:30 / 837人閱讀

摘要：只接受兩個參數，且第二個參數必須是數組，這個數組代表原函數的參數列表。即繼承原函數的原型將這個新對象綁定到此函數的上。全局執行環境執行環境執行環境閉包函數作為返回值，函數作為參數傳遞。

提升

1 變量提升

console.log(a);
var a = 1;

2 函數表達式

函數表達式的提升 === 變量提升

a(); 
var a = function(){...};

3 函數聲明

func();
function func(){ console.log(1); }
var func = function(){ console.log(2); }
func();

TEST

function func(){
    a = 1;
    console.log(window.a);  //  ?
    console.log(a);         //  ?
    var a = 2;
    console.log(a);         //  ?
}
func();

this

TEST

var people = {
    Name: "a",
    getName : function(){
        console.log(this.Name);
    }
};
var bar = people.getName;

bar();

var people = {
    Name: "a",
    getName : function(){
        console.log(this.Name);
    }
};
people.getName();

1 默認綁定

var name = "b";
var a = {
    name: "a",
    getName: function() {
        console.log(this.name);
    }
}
var obj = a.getName;
obj(); // ?

2 隱性綁定

var name = "b";
var a = {
    name: "a",
    getName: function() {
        console.log(this.name);
    }
}
var obj = a.getName();
obj; // ?

3 強制綁定

call apply bind 區別

call從第二個參數開始所有的參數都是原函數的參數。

apply只接受兩個參數，且第二個參數必須是數組，這個數組代表原函數的參數列表。

bind只有一個函數，且不會立刻執行，只是將一個值綁定到函數的this上,并將綁定好的函數返回。

var name = "b";
var a = {
    name: "a",
    getName: function() {
        console.log(this.name);
    }
}
a.getName.call(this);

var name = "b";
var a = {
    name: "a",
    getName: function() {
        console.log(this.name);
    }
}
var func = a.getName.bind(this);
func();

4 New綁定

創建一個新對象。

把這個新對象的__proto__屬性指向原函數的prototype屬性。(即繼承原函數的原型)

將這個新對象綁定到此函數的this上。

返回新對象，如果這個函數沒有返回其他對象。

var name = "b";
function func() {
    this.name = "a";
    console.log(this.name);
}
var obj = new func();
obj; // ?

5 箭頭函數

在定義時綁定this

this無法修改

var name = "b";
var people = {
    name: "a",
    getName : function() {
        return () => {
            console.log(this.name);
        }
    }
};
var bar = people.getName();

bar();

TEST

function foo(arg){
    this.a = arg;
    return this
};

var a = foo(1);
var b = foo(2);

console.log(a.a);    // ?
console.log(b.a);    // ?

var x = 1;
var obj = {
    x: 2,
    f: function(){ console.log(this.x); }
};
var bar = obj.f;
var obj2 = {
    x: 3,
    f: obj.f
}
obj.f();
bar();
obj2.f();

function obj() {
    getName = function () { console.log (1); };
    return this;
}
obj.getName = function () { console.log(2);};
obj.prototype.getName = function () { console.log(3);};
var getName = function () { console.log(4);};
function getName () { console.log(5);}
 
obj.getName ();                // ?
getName ();                    // ?
obj().getName ();              // ?
getName ();                    // ?
new obj.getName ();            // ?
new obj().getName ();          // ?
new new obj().getName ();      // ?

執行環境&作用域

變量、函數表達式——變量聲明，默認賦值為undefined；

this——賦值；

函數聲明——賦值；

這三種數據的準備情況我們稱之為“執行上下文”或者“執行上下文環境”。

作用域在函數定義時就已經確定了。而不是在函數調用時確定。

var a = 10;
function fn() {
    console.log(a);
}
function bar(f) {
    var a = 20;
    f()
}
bar(fn);

1 全局執行環境
2 fn執行環境
3 bar執行環境

var a = 10;               // 1
var b = 200;    
function fn() {     
    var b = 20;
    function bar() { 
        console.log(a + b);
    }
    bar();                 // 3
}
fn();                    // 2

var a = 10;               // 1
var b = 200;    
function fn() {     
    var b = 20;
    function bar() { 
        console.log(this.a + this.b);
    }
    bar();                 // 3
}
fn();                    // 2

閉包

函數作為返回值，函數作為參數傳遞。

function fn () {
    var max = 10;
    return function bar(x) {
        if (x > max) {
            console.log(x);
        }
    }
}
var f1 = fn();
var max = 100;
f1(15);

GPU云服務器云服務器 js執行環境執行環境 php執行環境 js執行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94420.html

[譯]了解Javascript中的執行上下文和執行堆棧

摘要：理解執行上下文和執行堆棧對于理解的其它概念如提升，范圍和閉包至關重要。正確地理解執行上下文和執行堆棧將幫助你更好地使用開發應用。引擎執行位于執行堆棧頂部的方法。當調用時，為該函數創建一個新的執行上下文，并且把它推入到當前執行堆棧。 By Sukhjinder Arora | Aug 28, 2018 原文如果你是或者你想要成為一名js開發者，那么你必須了解js程序內部的運作。理解執行...

qujian 2019-08-23 12:43 評論0 收藏0
JS基礎知識：變量對象、作用域鏈和閉包

摘要：前言這段時間一直在消化作用域鏈和閉包的相關知識。而作用域鏈則是這套規則這套規則的具體運行。是變量對象的縮寫那這樣放有什么好處呢我們知道作用域鏈保證了當前執行環境對符合訪問權限的變量和函數的有序訪問。前言：這段時間一直在消化作用域鏈和閉包的相關知識。之前看《JS高程》和一些技術博客，對于這些概念的論述多多少少不太清楚或者不太完整，包括一些大神的技術文章。這也給我的學習上造成了一些困惑，...

Keven 2019-08-26 11:32 評論0 收藏0
javascript執行細節分析

摘要：此時執行環境棧中有兩個執行環境，分別是全局執行環境和函數執行環境，的執行環境在棧頂，全局執行環境在棧的底部。所以執行結果轉載深入理解JS執行細節 Javascript從定義到執行，JS引擎在實現層做了很多初始化工作，因此在學習JS引擎工作機制之前，我們需要引入幾個相關的概念：執行環境棧、全局對象、執行環境、變量對象、活動對象、作用域和作用域鏈等，這些概念正是JS引擎工作的核心組件。這...

Yang_River 2019-08-20 18:16 評論0 收藏0
js經典面試題--變量提升、執行環境、作用域鏈

摘要：經典面試題變量提升執行環境作用域鏈今天記錄一個的經典面試題，該編程題涉及到了的變量提升執行環境作用域鏈問題。這樣，一致延續到全局執行環境全局執行環境的變量對象始終都是作用域鏈中的最后一個對象。 js經典面試題--變量提升、執行環境、作用域鏈今天記錄一個js的經典面試題，該編程題涉及到了js的變量提升、執行環境、作用域鏈問題。 1、變量提升js沒有塊級作用域，使用var聲明的變量會自動...

EscapedDog 2019-08-22 16:26 評論0 收藏0
從底層看JS執行機制

摘要：作用域鏈用于表明上下文的執行順序。當前上下文執行完畢則出棧，執行下一個上下文。從一個簡單的例子出發先從一個簡單的例子出發（先不涉及異步），看看自己是否大致了解瀏覽器的執行機制： console.log(a); var a=1; function foo(a){ console.log(a); var a=2; console.log(a); } foo(a)...

thursday 2019-08-26 13:57 評論0 收藏0