您的位置:首页 > Web前端 > JavaScript

JS new原理和代码实现

2019-03-30 16:39 218 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39816673/article/details/88914512
[code]        var Fn=function(){
this.name='hty'
}
const fn=new Fn;

当new Fn执行的时候,内部执行过程如下:

  1. 一个继承自Fn.prototype的新对象被创建。
  2. 使用指定的参数调用构造函数Fn,并将this绑定到新创建的对象。new Fn等同于new Fn(),也就是没有指定参数列表,Fn 不带任何参数调用的情况。
  3. 由构造函数返回的对象就是new表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤),这里需要注意,如果构造返回的不是对象,则不管return语句,返回步骤1创建的对象。

手动实现 

[code]        var New =function(fn){
var obj={};
obj.__proto__=fn.prototype;
// 将 arguments 对象转为数组
var args = [].slice.call(arguments);
//去除构造函数
args.shift();
// 执行构造函数并改变this对象
var result = fn.apply(obj, args);
if(Object.prototype.toString.call(result)=="[object Object]" ){
return result
}else{
return obj;
}
}

测试

[code]       var New =function(fn){
var obj={};
obj.__proto__=fn.prototype;
// 将 arguments 对象转为数组
var args = [].slice.call(arguments);
//去除构造函数
args.shift();
// 执行构造函数并改变this对象
var result = fn.apply(obj, args);
if(Object.prototype.toString.call(result)=="[object Object]" ){
return result
}else{
return obj;
}
}

var Fn=function(sex){
this.name='hty';
this.sex=sex;
}
//返回一个对象
var Fn1=function(){
this.name='hml';
return {
name:'hty1'
}
}
//返回非对象
var Fn2=function(){
this.name='hty3';
return 1000
}
const fn=New(Fn,'123');
console.log(fn.name);//hty
console.log(fn.sex);//123
const fn1=New(Fn1)
console.log(fn1.name);//hty1
const fn2=New(Fn2)
console.log(fn2.name);//hty1

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: