JavaScript原型和闭包总结

曾经终败给现在 2023-10-12 07:30 32阅读 0赞

## JavaScript 原型和闭包 总结 ##

### 一切皆对象 ###

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

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的属性，指向这个函数本身。

![format_png][]

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\_\_，即隐式原型。

![img][]

obj.\_\_proto\_\_和Object.prototype的属性一样。

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

![img][img 1]

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变量已经被复制。可以看出，函数每调用一次，都会产生一个新的执行上下文环境，不同的调用就会有不同的参数。

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

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

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>赋值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>arguments</td> 
   <td>赋值</td> 
  </tr> 
  <tr> 
   <td>自由变量的取值作用域</td> 
   <td>赋值</td> 
  </tr> 
 </tbody> 
</table>

执行上下文通俗定义：在执行代码前，将要用到的变量事先拿出来，有的直接赋值，有的用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出来的对象。

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

上面的代码中，如果函数作为构造函数使用，那么其中的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。

### 执行上下文栈 ###

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

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

![img][img 2]

### 作用域 ###

“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的取值要到创建这个函数的那个作用域中取值。

### 闭包 ###

闭包的两种情况：

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

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvMTM4MDEyLzIwMTQwOS8xNzIxMjExODI4NDE4OTYucG5n?x-oss-process=image/format,png
[img]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvMTM4MDEyLzIwMTQwOS8xODE1MDgzNDA2NTE5NzAucG5n?x-oss-process=image/format,png
[img 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvMTM4MDEyLzIwMTQwOS8xODE1MTA0MDMxNTM3MzMucG5n?x-oss-process=image/format,png
[img 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvMTM4MDEyLzIwMTQwOS8yMzIxMjIzMDA3Njg2NjUucG5n?x-oss-process=image/format,png