博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
function作为构造函数和非构造函数调用的区别
阅读量:6037 次
发布时间:2019-06-20

本文共 2588 字,大约阅读时间需要 8 分钟。

var currentTime = Date() 能生成一个当前时间的日期对象,var currentTime = new Date() 也能生成一个同样的对象。如果你看过一些框架,那么你会发现有的框架生成对象写法是 new ClassName(),有的框架是 className()。 那么两种方式有什么区别呢?

普通函数/方法调用

假设我们定义了一个函数:

function normalFunc() {  console.log( this );}// 第一种调法normalFunc();// 第二种调法normalFunc.call( null );// 第三种调法var obj = {  method: normalFunc}obj.method();

我们把一个函数被当作一个普通函数或者方法调用归为一类,其被调用时发生的主要步骤:

  1. 生成一个新的执行上下文和对应的作用域。(如果对执行上下文是什么不了解的话,可以参考我上一篇)

  2. 把当前函数和这个新的执行上下文和作用域关联起来。

    2.1. 如果当前函数是箭头函数,那么把作用域中的 environment record 对象的内部属性 [[thisBindingStatus]] 设置成 lexical。

  3. 把这个执行上下文压入调用栈的顶部,即设置成运行执行上下文(running execution context)。

  4. 接下来处理当前函数的属性 this 的取值:

    4.1. 如果当前函数是箭头函数,那么这步就不做任何处理(因为已经在步骤2.1中做了标志位)。

4.2. 如果不是箭头函数,那么先查看当前函数是否处在严格模式下。

4.2.1. 严格模式:this 的取值取决于如何调用当前函数,譬如上例代码中第一种调法,取值为 undefined,第二种调法取值为 `normalFunc.call(` 的第一个参数,第三种调法取值为 obj。4.2.2. 非严格模式:先按4.2.1的分类获得 this 的取值,如果是 null 或者 undefined,用全局对象代替 null 或者 undefined。如果 this 的取值是非空值那么把 this 指向这个非空值(注1)。

4.3. 把 this 的取值保存在作用域中的 environment record 对象的内部属性 [[thisValue]] 中(步骤4中并非把 this 直接指向这些取值,而是把值保存在作用域特定内部属性中,this 的寻值过程还有额外一步,下面会说明)。

  1. 执行函数体。

  2. 把当前执行上下文弹出调用栈。

  3. 如果步骤5有返回,则返回这个结果。如果步骤5没有返回,则返回 undefined。

注1:这里非空值还要判断是原始类型(primitive value),还是对象类型。如果是原始类型,取值还要再把原始类型包装成对象才能作为 this 的取值。步骤中避免太繁琐,省略了细节顾特地加上注释。

函数中 this 的取值过程(ResolveThisBinding)

结合上面描述的步骤,我们来看看当你在函数中使用 this 时(上面的步骤5中 this 已经可用),程序时如何寻找 this 的:

  1. 根据当前执行上下文查找到对应的 enviroment record(execution context -> scope -> environment record)。

  2. 判断当前这个 record 是否存储过[[thisValue]],如果没有的就沿着作用域链向上查找,以全局作用域为终点。

  3. 如果找到了,则返回。

如上所述,箭头函数本身的作用域并没有存储[[thisValue]],所以其内部使用 this 会去定义箭头函数的地方(函数)去取 this,如果取不到继续向上查找。

函数作为构造函数调用

// 没有继承关系function normalFuncAsContructor() {  // return a new object?  // return {}  // or not  // [return]}var o = new normalFuncAsContructor();// 有继承关系function Parent(){}function Child(){}Child.prototype = new Parent();var c = new Child();

我们把一个函数被当作构造函数,使用 new 操作符调用时发生的主要步骤:

  1. 新建一个普通对象,把其原型 [[Prototype]] 指向构造函数的 prototype 属性的值。

  2. 如普通函数调用的步骤1一样,生成一个新的执行上下文和对应的作用域,并把当前构造函数和两者关联起来。

  3. 把这个执行上下文压入调用栈的顶部。

  4. 把第一步生成的对象当作 this 的取值保存到作用域中的 environment record 对象的内部属性 [[thisValue]] 中。

  5. 执行函数体。

  6. 把当前执行上下文弹出调用栈。

  7. 处理函数执行的结果,即 new 了之后返回啥:

    7.1 如果步骤5返回一个对象,那么就把这个对象作为此次 new 操作的返回值。

7.2 如果返回的不是对象,而且这个函数不是 generator 函数,那么返回第一步生成的对象(generator 就先不在这里讨论了)。

知道了两者的区别,我们就能在函数体里面搞文章了,你可以通过如下代码检测用户怎么调用你的函数。如果你知道了用户怎么调用,你自然可以根据你想要的结果限制用户的使用方法。

function myFunc() {  if ( this && myFunc.prototype.isPrototypeOf( this ) ) {    console.log( 'called by new operator' );  } else {    console.log( 'commonly invoked' );  }}myFunc(); // commonly invokednew myFunc(); // called by new operatorvar obj = {  method: myFunc}obj.method(); // commonly invoked

转载地址:http://mvlhx.baihongyu.com/

你可能感兴趣的文章
SparkStreaming窗口滑动以及拉链实现转化率模型的高阶应用-Spark商业应用实战
查看>>
【译】探索 Kotlin 的隐性成本(第三部分)
查看>>
RunLoop与Timer以及常用Mode
查看>>
Android中Activity的启动流程
查看>>
h5+js实现单机版贪吃蛇
查看>>
Javascript 中的数据类型判断
查看>>
AJAX的前因后果
查看>>
简单粗暴的react路由
查看>>
swift项目-让自己的项目支持cocoapod和carthage
查看>>
font-face
查看>>
vue基础与项目构建入门
查看>>
个人关于vue全家桶开发规范的梳理
查看>>
【论文实现】一篇Sigkdd的弹幕分析论文的python实现【LDA 实践者】
查看>>
十几行代码教你实现一个最简版的promise
查看>>
Java IO学习笔记八
查看>>
systemd vs supervisord
查看>>
如何构建一个分布式爬虫:基础篇
查看>>
50 行代码的 HTML 编译器
查看>>
[GitHub] vim 实操教程
查看>>
常见网络攻击--XSS && CSRF
查看>>