Javascript核心概述 - 深入了解javascript

/*
    一、执行上下文：堆栈（底部全局上下文+顶部当前活动上下文）
*/
/*
    二、变量对象： 变量根据执行上下文，找到数据存储位置，这种机制叫变量对象
    1. 变量都要var定义，且都不能delete
    2. __parent__属性，父级
*/
/*
    三、This:执行上下文的一个属性,不能改变??
    1. 全局this = global
    2. 函数this = 调用者this
    3. 手动设置函数调用的this值。apply和call：将第一个参数作为this值
    apply:第二个参数必须是数据
    call:任务参数
*/
a.call({ b: 20 }, 30); // this === {b: 20}, this.b == 20, c == 30
a.apply({ b: 30 }, [40]) // this === {b: 30}, this.b == 30, c == 40
/*
    四、函数
    1. 函数声明 function A()
    2. 函数表达式 var a = function(){}, (function A()), [function A()]: 不会污染变量对象（作为参数传递给其他函数）
*/
/*
    五、闭包：代码块和创建该代码块上下文中数据结合
    函数作为参数、或者返回值
    引发Funarg问题，多个函数同用一个上下文
*/
//闭包的用法
//1. 参数化
[1, 2, 3].sort(function (a, b) { });
[1, 2, 3].map(function (ele) {
    return ele;
});
sc.find(function (ele) { //...
});
[1, 2, 3].forEach(function (ele) { });
(function () {
    [].join.call(arguments, ';'); //1;2;3
}).apply(this, [1, 2, 3]);
//2. 延迟引用
setTimeout(function () { }, 100);
//3. 回调函数
XMLHttpRequestObject.onreadystatechange = function () { };

/*
    Javascript核心
*/
/*
    一、对象Object
    Object是一个属性的集合，拥有单独的原型对象prototype,原型对象可以是object，也可以试null
*/
var foo = {
    x: 10,
    y: 20
    //_proto_, 自带了原型对象属性，指向foo.Prototype
}
/*
    二、原型链
    有限对象链，实现链对象间继承和共享属性
*/
var a = {
    x: 10,
    calculate: function (z) {
        return this.x + this.y + z;
    }
}
var b = {
    y: 20,
    _proto_: a
}
var c = {
    y: 30,
    _proto_: a
}
//b,c的原型指向a，a的原型指向原型链重点Object.Prototype，默认值Null
/*
    三、构造函数
    constrcutor自动为创建的新对象设置原型对象，原型对象存放ConstructorFunction.Prototype
*/
//构造函数
function Foo(y) {
    //特定方式创建对象，并具备y属性
    this.y = y;
}
//Foo.prototype存放新对象原型引用，可以用于定义继承和共享属性方法
Foo.prototype.x = 10;
Foo.prototype.calculate = function (x) {

}
var b = new Foo(10);
var c = new Foo(20);

b._proto_ === Foo.prototype;//true
c._proto_ === Foo.prototype;//true
// "Foo.prototype"自动创建了一个特殊的属性"constructor"
// 指向a的构造函数本身
// 实例"b"和"c"可以通过授权找到它并用以检测自己的构造函数
b.constructor === Foo, // true
c.constructor === Foo, // true
Foo.prototype.constructor === Foo // true
b.calculate === b.__proto__.calculate, // true
b.__proto__.calculate === Foo.prototype.calculate // true

/*
    四、执行上下文栈
    ECMAScript中代码有三种类型：global,function,eval
*/
function foo(bar) { }
// 调用相同的function，每次都会产生3个不同的上下文
//（包含不同的状态，例如参数bar的值）
foo(10);
foo(20);
foo(30);
/*
    五、执行上下文
    一个执行的上下文=object，每个上下文都有一系列属性（上下文状态）：跟踪关联代码执行进度
    1. var 变量对象
    2. this指针
    3. scope作用域链
*/
/*
    六、变量对象
    执行上下文相关的数据作用域：用于存储被定义在上下文的变量和函数声明
*/
//全局执行上下文情况
var foo = 10;
function bar() { }//函数声明
(function baz() { }());//函数表达式
console.log(
        this.foo == foo,
        window.bar == bar
    );
console.log(baz);//错误
/*
    七、活动对象
    当函数被调用时，创建普通参数，和特殊参数{0:10,1:20...}（带索引属性的参数映射表）
*/
function foo(x, y) {
    var z = 30;
    function bar() { };
}
/*
    激活对象如下：
    x           10
    y           20
    arguments   {0:10,1:20,...}
    z           30
    bar         <function>
*/
/*
    八、作用域链
    对象列表，用于检索上下文代码中出现的标示符
*/
var x = 10;
(function foo() {
    var y = 20;
    (function bar() {
        var z = 30;
        //x和y是自由变量，会在作用域链的下一个对象中找到
    }());
}());
//作用链如下
var bar = {
    z: 30,
    _parent: foo
}
var foo = {
    y: 20,
    _parent_:window
}
var window = {
    x: 10,
    _parent: null
}
/*
    九、闭包:是一个系列的代码块，并且静态保存所有父级的作用域。通过这些保存的作用域来搜寻函数中的自由变量
    两个概念：1. funargs：函数作为参数，2. functional values：函数运行返回函数
    两个概念引发两个问题：1. 向上查找函数参数问题。
    作用域链= 活动对象 + 【scope】
    函数在被创建时保留外部作用域，外部作用域用于未来函数调用中用于变量查找
*/
//静态作用域，EMCAScript不适用动态作用域
//x变量保留在bar函数的【scope】中
function foo() {
    var x = 10;
    return function bar() {
        console.log(x);
    };
}
//foo返回一个function,并且这个返回的function可以随意使用内部变量x
var returnFunction = foo();
var x = 20;
returnFunction();//结果10，不是20；
//自上而下
var x = 10;
function foo() {
    console.log(x);
}
(function (funArg) {
    var x = 20;
    //我们使用foo函数的[scope]里保存的全局变量x,并非caller作用域的x
    funArg(); //
}(foo));
//两个闭包函数，含有相同父级作用域，则相互影响
function baz() {
    var x = 1;
    return {
        foo: function foo() { return ++x; },
        bar: function bar() { return --x; }
    };
}
var closures = new baz();
closuree.foo();//
closures.bar();//
//共享[scope]，在循环创建多个函数中，共享同一个[scope]，将导致循环变量始终为最后一次赋值
//解决方式：在作用域链中，增加额外对象：函数
var data = [];
for (var i = 0; i < 3; i++) {
    //外围增加自执行的函数，保留参数
    data[i] = (function (x) {
        return function () {
            alert(x);
        };
    })(k);
}
/*
    十、This指针
    this适合执行的上下文环境相关的特殊对象= context Object 上下文对象
    this:由函数调用者提供caller
*/