原型链闭包面试题,原型链的理解,原型链和

再探原型和闭包

最近看见一篇关于原型和闭包的博文,十分精彩,传送门:深入理解javascript原型和闭包(完结)-王福朋。看完有种茅舍顿开的感觉,之前自己总结的原型链和闭包,实在是有失偏颇,因此在参考这篇文章,重新整理了原型链和作用域链的知识,加以巩固。

原型链: . _ _ proto _ _ 属性   首先,我们需要牢记两点:①__proto__和constructor属性是对象所独有的;② prototype属性是函数所独有的。但是由于JS中函数也是一种对象,所以函数也拥有__proto__和constructor属性,这点是致使我们产生困惑的很大原因之一。上图有点复杂,我们把它按照属性分别拆开,然后进行分析:   第一,这里我们仅留下 proto 属性,它是对象所独有的,可以看到__proto__属性都是由一个对象指向一个对象,即指向它们的原型对象(也可以理解为父对象),那么这个属性的作用是什么呢?它的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(可以理解为父对象)里找,如果父对象也不存在这个属性,则继续往父对象的__proto__属性所指向的那个对象(可以理解为爷爷对象)里找,如果还没找到,则继续往上找…直到原型链顶端null(可以理解为原始人。。。),再往上找就相当于在null上取值,会报错(可以理解为,再往上就已经不是“人”的范畴了,找不到了,到此结束,null为原型链的终点),由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。

prototype属性   prototype属性,它是函数所独有的,它是从一个函数指向一个对象。它的含义是函数的原型对象,也就是这个函数(其实所有函数都可以作为构造函数)所创建的实例的原型对象,由此可知:f1.proto === Foo.prototype,它们两个完全一样。那prototype属性的作用又是什么呢?它的作用就是包含可以由特定类型的所有实例共享的属性和方法,也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候,其实会默认同时创建该函数的prototype对象。

constructor属性   constructor属性也是对象才拥有的,它是从一个对象指向一个函数,含义就是指向该对象的构造函数,每个对象都有构造函数(本身拥有或继承而来,继承而来的要结合__proto__属性查看会更清楚点,如下图所示),从上图中可以看出Function这个对象比较特殊,它的构造函数就是它自己(因为Function可以看成是一个函数,也可以是一个对象),所有函数和对象最终都是由Function构造函数得来,所以constructor属性的终点就是Function这个函数。

1. 原型链

1.1. 原型

所有的对象都是由其构造函数创建,基础对象最基本的构造函数是Obecjt()。每个对象都有一个" __ proto__ "的属性,指向该对象构造函数的原型,该属性也被称为隐式原型。每个函数都有一个"prototype"的属性,表示这个构造函数的原型,函数的原型实际上是一个对象,并且该对象有一个construct的属性,指向构造函数本身。

同时,由于函数也是对象,所有函数的构造函数都是Function()。函数的隐式原型就是Function()的显式原型。 甚至连Object()函数的构造函数都是Function(),假设存在构造函数Aoo()和其实例化对象a,存在下面的关系:

a.__proto__ == Foo.prototype; // 对象的隐式原型指向其构造函数的显式原型

Foo.__proto__ == Function.prototype; // 函数的构造函数是Function()

Foo.prototype.__proto__ == Object.prototype; // 原型也是一个对象,对象的基本构造函数是Object()

Object.__proto__ == Function.prototype; // Object()函数的构造函数也是Function()

Function.__proto__ == Function.prototype; // Function()函数是被自身创建的-_-

Function.prototype.__proto__ == Object.prototype; // Function()的原型也是对象

Object.prototype.__proto__ == null; // Object.prototype 是第一个对象,所有对象的基础属性和方法都源于此,所以他的隐式原型是null。

1.2. 继承

JS中的继承是通过原型链来体现的:访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着proto这条链向上找,这就是原型链。 如果将构造函数A的原型是构造函数B的实例对象,则A的实例对象就可以通过A.prototype获取到b的属性和方法(因为A.prototype == b)。 可以使用hasOwnProperty方法来判断一个属性到底是实例对象的还是其原型的。

可以通过使用instanceof来判断两个类是否存在继承关系,其规则为:沿着左操作数的proto这条线来找,同时沿着右操作数的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false。通过上面的关系,就可以解释下面的问题了:

console.log(Object instanceof Function); // true 
console.log(Function instanceof Function); // true
console.log(Function instanceof Object); // true

2. 闭包

2.1. 环境上下文

环境上下文,分为全局上下文和函数上下文:

  • 全局上下文中的数据内容包括
    • 普通变量声明
    • 函数声明
    • this
  • 函数上下文中的数据内容除了上面三种情形,还包括
    • 参数
    • arguments
    • 自由变量(指不在该上下文中声明的变量)

所谓的执行环境上下文,指的是:在执行代码之前,解析器会进行变量声明提前,也就是说会把这段代码将要用到的所有变量都事先拿出来,有的直接赋值了,有的先用undefined占个空。

  • 变量、函数表达式声明,默认赋值为undefined占位;
  • this——赋值;
  • 函数语句声明——赋值;

2.2. 上下文栈

下面是代码执行的大致过程:

  1. 在加载程序时,已经确定了全局上下文环境以及执行上下文(变量声明提前等准备工作),并随着程序的执行对变量进行赋值。
  2. 在函数体的语句执行之前,arguments变量和函数的参数都已经被赋值。因此,函数每被调用一次,都会产生一个新的执行上下文环(即使是同一个函数(甚至是相同参数),在不同的调用下产生的上下文环境也是不一样的)。
  3. 当程序运行到将要调用函数的时候,会生成该函数的上下文环境,然后将此上下文压入上下文环境栈并设置为活动状态。
  4. 然后执行函数内部的代码,如果遇见函数调用则重复上述步骤:产生新的上下文->入栈并设置为活动状态->执行函数代码;
  5. 当这个函数调用完毕,则其上下文环境被销毁,从上下文环境栈弹出,此时程序又回到了其父作用域下的上下文环境,并在栈中将其置为活动状态
  6. 按照此过程进行,到最后上下文环境栈中只剩下了全局上下文环境(当然这是在没有闭包的情况下)

2.3. 函数内部的数据内容

上面提到,函数上下文中的数据内容,除了普通变量声明,函数声明和this之外,还多了参数,arguments对象和自由变量。

2.3.1. 自由变量

自由变量的定义:在fn函数中使用的变量x,却没有在A作用域中声明,对于fn函数作用域来说,x就是一个自由变量。函数在定义的时候(不是调用的时候),就已经确定了函数体内部自由变量的作用域。

var a = 10;
function fn(){
    console.log(a);
}

function foo(f){
    var a = 20;
    f();
}

foo(fn); // 10

2.3.2. this

跟自由变量不同的是,函数内部的this取何值,是在函数真正被调用执行的时候确定的,因为函数定义的时候根本确定不了。

  • 如果函数作为构造函数用,那么其中的this就代表它即将new出来的对象,在原型链中,this代表的也都是当前对象的值;但是如果直接把构造函数当作普通函数调用,则其的this会变成window
  • 如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对象;但是如果方法函数被赋值到了另一个变量中,并没有作为obj的一个属性被调用,那么this的值就是window,此时就无法在函数中使用this获取原对象的属性
  • 当一个函数被call和apply调用时,this的值就取传入的对象的值
  • 全局环境下,this永远是window,普通函数在调用时,其中的this也都是window
  • 闭包函数中的this也是window。

2.4. 作用域

JS中只有全局作用域和函数作用域,并没有“块级作用域”的概念,函数作用域是在函数定义时生成的。作用域只是一个抽象的概念,其中没有变量。要通过作用域对应的执行上下文环境来获取变量的值。同一个作用域下,不同的调用会产生不同的执行上下文环境,继而产生不同的变量的值。所以,如果要查找一个作用域下某个变量的值,就需要找到这个作用域对应的执行上下文环境,再在其中寻找变量的值。牢牢记住,作用域中变量的值是在执行过程中产生的确定的,而作用域却是在函数创建时就确定了。

作用域内部声明的变量(包括参数)会覆盖掉外部的同名变量,这正是我们需要的。那么,程序是如何确定作用域下的某个上下文中所使用的自由变量呢?

前面提到过:函数在定义的时候(不是调用的时候),就已经确定了函数体内部自由变量的作用域。在fn函数中,取自由变量x的值时,要到创建fn函数的那个作用域中取,无论fn函数将在哪里调用。 如果跨了一步,还没找到呢?接着跨!一直跨到全局作用域为止。要是在全局作用域中都没有找到,那就是真的没有了。

这个一步一步“跨”来寻找自由变量的路线,就是我们常说的“作用域链”。

2.5. 闭包函数

了解了作用域链,理解闭包就十分轻松了。关于闭包,有一个不那么精准的定义:一个作为函数返回值或者函数参数的函数。

// 作为函数返回值
function fn(){
    var a = 100;
    return function foo(x){
        if (x > a){
            console.log("more");
        }else {
            console.log("less or equal");
        }
    }
}
var a = 10;
var f = fn();
f(50); // "less or equal"

// 作为参数
var a = 10;
var fn = function(x){
    if (x > a){
        console.log("more");
    }else {
        console.log("less or equal");
    }
}

!(function(f){
    // 这里的闭包是形参f而不是实参fn,fn只是一个普通的函数表达式声明的函数
    var a = 100;
    f(50); // "more"
})(fn);

在前面的上下文栈中提到:当函数调用结束,其执行上下文将从上下文栈中弹出并被销毁,其中的变量也随之被销毁,这里的例外就是闭包。

由于闭包函数是在函数内部定义的函数(函数可以创建一个独立的作用域),因此如果在闭包中使用其定义函数上下文中的自由变量,或者在其他地方调用该函数,则必须保证其定义函数的执行上下文仍然存在(如果跟普通的函数一样调用结束就被销毁,则就无法找到其中的数据内容了。),所以如果函数上下文中存在闭包,则在调用结束之后不会被销毁,而是保存在上下文栈中(尽管活动状态已经被切换为上一层),而之所以说使用闭包会增加内存开销,就是这个原因。

总之,理解闭包,弄清楚环境上下文和作用域链是十分必要的,此外,牢记“函数在定义的时候(不是调用的时候),就已经确定了函数体内部自由变量的作用域 ”。

3. 最后

这个世界上有无数优秀且勤奋的人,然而我并不是其中的一个。感谢这么多前辈愿意在互联网上分享自己的学习笔记和心得,我现在能做的就是抓紧学习,希望有朝一日也能为社区的发展贡献绵薄之力。加油吧!

[#原型](/archive/原型)[#闭包](/archive/闭包)[#变量作用域](/archive/变量作用域)[#JavaScript](/archive/JavaScript)
[SCSS进阶](/article/SCSS进阶)[初识Vue](/article/初识Vue)

原型链闭包面试题,原型链的理解,原型链和的相似文章

凛冬将至什么水平,2022凛冬之时三年经验前端面经分析理解vue中的diff算法,Vue原理解析(八):一起搞明白令人头疼的diff算法分析Vue 的生命周期之间到底做了什么事清?(源码详解,带你从头梳理组件化流程)分析金三银四,我先面为敬了(腾讯、美团、商汤科技等七家大厂面试有感)分析浏览器的渲染原理及优化方式,浏览器层合成与页面渲染优化分析 连八股文都不懂还指望在前端混下去么分析【7k长文,一次到位】前端八股文再来一遍🧐(图解 + 总结)分析2021年前端各大公司都考了那些手写题(附带代码)分析vue中$router与$route的区别,可能比文档还详细--VueRouter完全指北分析【建议👍】再来40道this面试题酸爽继续(1.2w字用手整理)分析