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>
相关推荐
持梦远方14 分钟前
C 语言基础入门:基本数据类型与运算符详解
c语言·开发语言·c++
abigale0319 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
zzywxc78731 分钟前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
专注API从业者39 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile42 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
DES 仿真实践家2 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
Code Warrior3 小时前
【每日算法】专题五_位运算
开发语言·c++