js执行环境

zgbgx 发布于2019-08-22 16:30 / 831人阅读

摘要：只接受两个参数，且第二个参数必须是数组，这个数组代表原函数的参数列表。即继承原函数的原型将这个新对象绑定到此函数的上。全局执行环境执行环境执行环境闭包函数作为返回值，函数作为参数传递。

提升

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执行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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