JavaScript原型和闭包总结

JavaScript 原型和闭包 总结

一切皆对象

typeof函数输出的一共有几种类型，在此列出：

       function show(x) {

            console.log(typeof x);    // undefined
            console.log(typeof 10);   // number
            console.log(typeof 'abc'); // string
            console.log(typeof true);  // boolean

            console.log(typeof function () {});  //function

            console.log(typeof [1, 'a', true]);  //object
            console.log(typeof { a: 10, b: 20 });  //object
            console.log(typeof null);  //object
            console.log(typeof new Number(10));  //object
        }
        show();

undefined, number, string, boolean）属于简单的值类型，函数、数组、对象、null、new Number(10)都是对象。他们都是引用类型。

引用类型的类型判断使用 instanceof。

var fn = function () { };
console.log(fn instanceof Object);  // true

对象：对象——若干属性的集合。

函数和对象的关系

对象都是通过函数创建的。

var obj = { a: 10, b: 20 };
var arr = [5, 'x', true];
//等同于下面的代码
var obj = new Object();
obj.a = 10;
obj.b = 20;
var arr = new Array();
arr[0] = 5;
arr[1] = 'x';
arr[2] = true;

其中的 Object 和 Array 都是函数：

prototype 原型

每个函数都有一个属性叫做prototype。prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。

function Fn() { }
        Fn.prototype.name = 'aaa';
        Fn.prototype.getYear = function () {
            return 1988;
        };

        var fn = new Fn();
        console.log(fn.name);
        console.log(fn.getYear());

Fn 是一个函数，fn对象是从Fn函数new出来的。

因为每个对象都有一个隐藏的属性——“proto”，这个属性引用了创建这个对象的函数的prototype。即：fn.proto === Fn.prototype

隐式原型

每个函数function都有一个prototype，每个对象都有一个__proto__，即隐式原型。

obj.__proto__和Object.prototype的属性一样。

每个对象都有一个__proto__属性，指向该对象的函数的prototype。

Object.prototype 也是对象，他的__proto__指向null。

function Fn() { }
var fn1 = new Fn();

var obj = new Object();
console.log(obj);

上诉代码的链式关系如下：
fn1.proto -> Fn.prototype
Fn().proto -> Fucntion.prototype
obj.proto -> Object.prototype
Object().proto -> Function.prototype
Function().proto -> Function.prototype

Function 是一个函数，也是一种对象，因此也有__proto__属性，Function是被自身创建的。

Function.prototype指向的对象，它的__proto__也指向Object.prototype

instanceof

A instanceof B

Instanceof的判断队规则，沿着A的__proto__这条线找，同时沿着B的prototype这条线来找，如果两个都能找到同一个引用，即同一个对象，返回true。

intanceof 表示的就是一种继承关系，或者原型链结构。

继承

JavaScript中的继承是通过原型链来体现的。

function Foo() {}

var f1 = new Foo();

f1.a = 10;

Foo.prototype.a = 100;
Foo.prototype.b = 200;

console.log(f1.a);
console.log(f1.b)

访问一个对象的属性时，现在基本属性中查找，如果没有再沿着__prototype__这条链向上找，这就是原型链。

使用hasOwnProperty判断是基本属性还是原型中的属性

由于所有的对象都会有Object.prototype的方法，这就是所谓的“继承”。

原型的灵活性

对象或者函数，可以在被new出来后再添加。

如果继承的方法不适合，可以做出修改。

var obj = {a:10, b:20};
console.log(obj.toString())  // [object Object]

var arr = [1,2,true];
console.log(arr.toString());  // 1，2，true

上面代码中，Object和Array的toString()方法不一样，这是因为Array.prototype.toString()方法做了修改。

执行上下文

浏览器的“准备工作”：

• 变量、函数表达式——变量声明，默认赋值为undefined；
• this——赋值
• 函数声明——赋值

这三种情况称之为“执行上下文”或者“执行上下文环境”

function fn(x) {
  console.log(arguments);
  console.log(x);
}

fn(10);

以上代码展示了在函数体的语句执行之前，arguments变量已经被复制。可以看出，函数每调用一次，都会产生一个新的执行上下文环境，不同的调用就会有不同的参数。

函数在定义的时候就已经确定了内部自由变量作用域。

普通变量（包括函数表达式），如： var a = 10;	声明（默认赋值为undefined）
函数声明，如： function fn() { }	赋值
this	赋值

如果代码段是函数体，那么在此基础上需要附加：

参数	赋值
arguments	赋值
自由变量的取值作用域	赋值

执行上下文通俗定义：在执行代码前，将要用到的变量事先拿出来，有的直接赋值，有的用undefined 占空。

this

this的取值在函数真正被调用执行的时候确定，函数定义时无法确定。分为四种情况。

1、构造函数

所谓构造函数就是用来new对象的函数。

function Foo() {
  this.name = 'mayandev';
  this.year = 1997;

  console.log(this);  // Foo {name: "mayandev", year: 1997}
}

var f1 = new Foo();

console.log(f1.name);
console.log(f1.year);

上面的代码中，如果函数作为构造函数使用，那么其中的this就代码它即将new出来的对象。

如果是直接调用函数，则：

function Foo() {
  this.name = 'mayandev';
  this.year = 1997;

  console.log(this);  // Foo {name: "mayandev", year: 1997}
}

var f1 = new Foo();

console.log(f1.name);
console.log(f1.year);

上面的代码中，如果函数作为构造函数使用，那么其中的this就代码它即将new出来的对象。

如果是直接调用函数，则：

function Foo() {
  this.name = 'mayandev';
  this.year = 1997;

  console.log(this);  //Window 
}

Foo();

在这种情况下，this指向window

2、函数作为对象的一个属性

如果函数作为对象的一个属性，并作为对象的属性被调用时，this指向该对象。

var obj = {
  x: 10,
  fn: function () {
    console.log(this); 	// Object {x: 10, fn: }
    console.log(this.x)  // 10
  }
};
obj.fn();

如果fn函数不作为obj的一个属性被调用，this就是指向window。

下面代码中的this就是指向window。

var obj = {
  x: 10,
  fn: function () {
    console.log(this); 	// Window
    console.log(this.x)  // undefined
  }
};
var fn1 = obj.fn;
fn1();

因此this的指向由函数所在域确定。

3、函数用call或者apply调用

当一个函数被call或者apply调用时，this的值就取传入的的对象的值。

var obj = {
  x: 10
};

var fn = function () {
  console.log(this);  // Object {x: 10}
  console.log(this.x); // 10
}

fn.call(obj);

4、在全局&调用普通函数

在全局环境下，this永远时windows。

console.log(this === window);

下面的代码需要注意：

var obj = {
  x : 10,
  fn: function () {
    function f() {
      console.log(this);
      console.log(this.x);
    }
    f();
  }

};

obj.fn();

上面的代码中，虽然f是在obj.fn内部定义的，但它仍然是一个普通的函数，this仍然指向window。

执行上下文栈

执行全局代码时，会产生一个执行上下文环境，每次调用函数又都会产生执行上下文环境。当函数调用完成时，上下文环境以及其中的数据都会被消除，再回到全局上下文环境。处于活动状态的执行上下文环境只有一个。

这是一个压栈的过程——执行上下文栈。

作用域

“JavaScript中没有块级作用域”

JavaScript除了全局作用域之外，只有函数可以创建作用域。

var a = 10,  // 全局作用域
    b = 20;

function fn() {   // fn作用域
  var a = 100,
      c = 200;
  function bar() {  // bar 作用域
    var a = 1440,
        b = 2440;
  }
}

全局代码和fn、bar两个函数都会形成一个作用域。而且，作用域有上下级的关系，上下级关系的确定就看函数是在哪个作用域下创建的。例如，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

自由变量到作用域链

自由变量：在A作用域中使用的变量x，却没有在A作用域中声明，即在其他作用域中声明的，x就是自由变量

x的取值要到创建这个函数的那个作用域中取值。

闭包

闭包的两种情况：

• 函数作为返回值
• 函数作为参数传递