JS面试题4——new操作符具体做了什么

  1. 创建了一个空的对象(每一个对象都是由构造函数构建出来的)
javascript 复制代码
<script>
  function Foo(){}
  console.log( new Foo() ); // 打印出了一个空对象
</script>
  1. 将空对象的原型(对象原型)指向构造函数的原型(原型对象)
javascript 复制代码
<script>
  function Foo(){}
  console.log( Foo.prototype == new Foo().__proto__ ); // true
</script>
  1. 将空对象作为构造函数的上下文(改变了this指向)
javascript 复制代码
/* 此时的this代表的是window */
<script>
function Foo(){
  console.log( this );
  this.name = '张三'; // window对象上并没有name
}
console.log( Foo() );
</script>

/* new了之后this就代表new出来的对象了 */
<script>
function Foo(){
  console.log( this );
  this.name = '张三'; // this代表new Foo()这个对象
}
console.log( new Foo() );
</script>
  1. 对构造函数有返回值的处理判断
javascript 复制代码
/* 如果返回的是基本数据的话对结果没有影响,会被忽略 */
<script>
function Foo(){
  this.name = '张三'
  return 11111;
}
console.log( new Foo() ); // 打印出的结果是new出来的对象 Foo {name: '张三'}
</script>

/* 如果返回的是引用类型的数据,那么结果就会使用return返回的数据(new就没用了) */
<script>
function Foo(){
  this.name = '张三'
  return [1,2,3];
}
console.log( new Foo() ); // 打印出的结果是[1,2,3]
</script>
  1. 自己简单实现一下new的过程
javascript 复制代码
/* 官方是通过构造函数new出来的对象 */
<script>
function Fun( age ) {
  this.age = age;
}
console.log( new Fun(18) )
</script>

/* 自己写实现new的效果 */
<script>
function Fun( age,name ) {
  this.age = age;
  this.name = name;
  return 111111;
}
function create( fn, ...args ) {
  console.log( args ); // 此时args就是个数组[18,'张三']
  // 1. 创建一个空对象
  var obj = {};
  // 2. 把空对象的原型指向构造函数的原型
  Object.setPrototypeOf(obj,fn.prototype);
  // 3. 将空对象作为构造函数的上下文(改变this指向)
  var result = fn.apply(obj,args);
  // 4. 对构造函数有返回值的处理判断
  return result instanceof Object ? result : obj;
}
console.log( create(Fun,18,'张三') );
</script>
相关推荐
Amd7942 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You10 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
喵叔哟18 分钟前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
狸克先生22 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
尘浮生24 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
sinat_3842410924 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap36 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
hopetomorrow38 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
loooseFish44 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress