原型 原型链 作用域 作用域链 闭包

一、什么是原型、原型链

所有函数都有一个prototype属性，在函数被定义时，就会被创建（显示原型）
所有的引用类型，都有一个proto属性（隐示原型）

function Person() {

}
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

image

每一个JavaScript对象(除了 null )都具有的一个属性，叫 _ proto _，这个属性会指向该对象的原型

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

image

constructor

每个原型都有一个 constructor 属性指向关联的构造函数

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

image

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

实例与原型

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 Kevin。

原型与原型

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

image

原型链

console.log(Object.prototype.__proto__ === null) // true

image

JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承。通过_ proto _向上搜索，直到null，这个访问链即为原型链。

二、作用域 作用域链

作用域：

程序中定义变量的区域，该位置决定了变量的声明周期。通俗的理解，作用域就是变量和函数可访问的范围，即作用域控制着变量和函数的可见性和声明周期。

function foo(){
    var a = 1;
    let b = 2;
    {
        let b = 3;
        var c = 4;
        let d = 5;
        console.log(a);
        console.log(b);
    }
    console.log(b)
    console.log(c)
    console.log(d)
}
foo();

执行流程：
1 编译并创建执行上下文
（1）函数通过var声明的变量，在编译阶段都被存在变量里边了。
（2）通过let声明的变量，在编译阶段会被放到词法环境中。
（3）在函数的作用于内部，通过let声明的变量并没有被放到词法环境中。
foo函数的执行上下文

    变量环境                    词法环境
    a = undefined           b = undefined
    c = undefined

2 继续执行代码，当执行到代码块

    变量环境                    词法环境
    a = 1                       b = undefined
    c = undefined               d = undefined

                                b = 2

3 当执行到console.log(a)

    变量环境                    词法环境
    a = 1                       b = 3
    c = 4                       d = 5

                                b = 2

先查找词法环境，在查找变量环境

作用域链

1 词法作用域
词法作用域是指作用域是由代码中函数声明的位置决定的，所以词法作用域是静态作用域，通过它就能预测代码在执行过程中
如何查找标识符。
词法作用域是代码阶段就决定好的，和函数是怎么调用的没有关系。
2 作用域链
通过作用域查找变量的链条称为作用域链，作用域链是通过词法作用域来确定的，而词法作用域反映了代码的结构

3、闭包

function foo(){
    var myName = "极客时间";
    let test1 = 1
    const test2;
    var innerBar = {
        getName:function(){
            console.log(test1);
            return myName;
        },
        setName:function(newName){
            myName = newName;
        }
    }
    return innerBar
}
var bar = foo();
bar.setName("极客邦");
bar.getName()
console.log(bar.getName)

在JavaScript中，根据词法作用域的规则，内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，即使外部函数已经执行结束，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合成为闭包，
比如外部函数foo，那么这些变量的集合就称为foo函数的闭包。