注册

深入理解JS中的原型和闭包

作者:admin - 时间:18-04-03 10:03 - 阅读量:37 - 评论:1

typeof 运算符

typeof函数输出的一共有几种类型:

  • undefined
  • number
  • string
  • boolean
  • function
  • object

一切(引用类型)都是对象,对象是属性的集合。

对象与函数之间的关系

对象是函数创建的,而函数却又是一种对象。


function Fn() { }

Fn.prototype.name = 'xiaoming';
Fn.prototype.getYear = function () {
    return 2018;
};

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

Fn是一个函数,fn对象是从Fn函数new出来的,这样fn对象就可以调用Fn.prototype中的属性。

因为每个对象都有一个隐藏的属性——“proto”,这个属性引用了创建这个对象的函数的prototype。即:fn.proto === Fn.prototype。这里的“proto”成为“隐式原型”。

对象的proto指向的是创建它的函数的prototype,就会出现:Object.proto === Function.prototype。

我的理解:

function Person(name,age){
    this.name = name;
   this.age = age; 
}

// 定义原型属性和方法(共享属性)
Person.prototype.legs = 2;
Person.prototype.arms = 2;

Person.prototype.walk = function(){
    console.log('Person walking...');
}

// 创建tom对象
var tom = new Person('tom',22);


tom.__proto__ === Person.prototype;

Person.__proto__ === Function.prototype;

Person.prototype.__proto__ === Object.prototype;

Function.__proto__ === Function.prototype;

Function.prototype.__proto__ === Object.prototype;

Object.__proto__ === Function.prototype;

Object.prototype.__proto__ === null;

instanceof 运算符

function Foo(){ }
var f1 = new Foo();

console.log(f1 instanceof Foo); // true
console.log(f1 instanceof Object); // true

Instanceof的判断队则是:沿着A的proto这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false。

原型链的结构: xx.png

执行上下文环境

在一段js代码拿过来真正一句一句运行之前,浏览器已经做了一些“准备工作”,其中就包括对变量的声明,而不是赋值。变量赋值是在赋值语句执行的时候进行的。

在“准备工作”中完成了哪些工作:

  • 变量、函数表达式——变量声明,默认赋值为undefined;
  • this——赋值;
  • 函数声明——赋值; 这三种数据的准备情况我们称之为“执行上下文”或者“执行上下文环境”。
var scope = "global";
function f(){
    console.log(scope); // undefined
   var scope = "local";
   console.log(scope); // local
}

闭包

应用的两种情况——函数作为返回值,函数作为参数传递。

  • 第一,函数作为返回值
function fn(){
    var max = 10;

   return function bar(x){
          if(x > max){
         console.log(x);      
      }
   };
}

var f1 = fn();
var max = 100;
f1(15);
  • 第二,函数作为参数被传递
var max = 10,
    fn = function(x){
        if(x > max){
            console.log(x);
        }
    };
(function(f){

    var max = 100;
    f(15);

})(fn);    

如上代码中,fn函数作为一个参数被传递进入另一个函数,赋值给f参数。执行f(15)时,max变量的取值是10,而不是100。

评论 一共有0条评论



登 录
注 册