zoukankan      html  css  js  c++  java
  • JS面试题----new的原理

    JS中的new操作符

    和其他高级语言一样,JS中也有new运算符,我们知道new运算符是用来实例化一个类,从而在内存中分配一个实例对象。但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象?

    ner操作符的基本使用:

    如果函数或者方法调用前带有关键字new, 则构成构造函数调用。构造函数调用会创建一个新的空对象,该对象继承自构造函数的prototype属性。构造函数试图初始化这个新创建的对象,并将这个对象用作其上下文

    构造函数通常不使用return关键字,当构造函数体执行完毕时,会隐式返回初始化的对象,然而如果构造函数显式地使用return语句返回一个对象,那么调用表达式的值就是这个return的对象。如果构造函数使用return语句但没有指定返回值或者返回一个原始值,那么这时将忽略返回值,同时使用初始化的新对象作为调用结果。

    通过上面的描述可以知道,以new操作符调用函数时,函数内部发生以下变化

    1. 创建一个空对象,并且this变量引用该对象同时还继承了该函数的原型prototype
    2. 属性和方法被加入到this引用的对象中
    3. 最后隐式返回this

    根据以上几个过程,尝试自己实现一个类似new的函数:

    // 实现类似new的函数,接受一个构造函数作为第一个参数
    function create () {
      let obj = {}
      // 获取构造函数
      let Constru = [].shift.call(arguments)
      obj.__proto__ = Constru.prototype
      // 其他参数
      let result = Constru.apply(obj, arguments)
      return result instanceof Object ? result : obj
    }

    以下是对实现的分析:

    • 首先我们创建一个空对象obj
    • 获取传入的构造函数
    • 设置空对象的原型
    • 绑定this到空对象obj
    • 确保返回值为对象

    和通过字面量创建对象的区别

    对于对象来说,其实都是通过new产生的,无论是function Foo() 还是 let a = { b: 1}

    对于创建一个简单对象来说,更推荐使用字面量的形式创建对象(无论是从性能上还是可读性上)。因为使用new Object() 的方式创建对象需要通过作用域链一层层找到Object, 但是你使用字面量形式就没有这个问题。但是对于复杂对象,以及涉及到继承关系时,最好还是用new

    new存在的意义:

    通过new产生原对象的一个实例对象,而这个实例继承了原对象的属性和方法,new存在的意义在于它实现了JS中的继承,而不仅仅是实例化了一个对象!

  • 相关阅读:
    Http服务器实现文件上传与下载(二)
    Http服务器实现文件上传与下载(三)
    NHibernate VS IbatisNet
    5. Element-UI的基本使用
    4. Vue脚手架
    3. Vue单文件组件
    webpack中的加载器
    webpack
    02.模块化相关规范
    01.前端工程化的学习目标
  • 原文地址:https://www.cnblogs.com/jett-woo/p/12564398.html
Copyright © 2011-2022 走看看