如何实现一个new方法

如何实现一个方法起到与new相同的作用

首先我们先看看new方法做了什么,又具有什么特性:
new的过程中发生了下面这些事:

1、创建一个对象;
2、将构造函数作用域赋到创建的对象中(因此this将会指向这个新对象);
3、执行构造函数中代码;
4、返回这个对象

new关键字与构造函数组合使用生成一个实例,例如:

const person = new Person()

new组合构造函数生成了新的实例,这个新的实例与构造函数具有以下关系,其实也就是原型中的关系:

person.__proto__ == Person.prototype;
Person.prototype.constructor == Person;
Person.prototype.__proto__ == Object.prototype;
Person.prototype.__proto__.__proto__ == null;

上面的关系中后面与Object相关的关系我们可以先不管,因为所有原型都是Object的实例;
新的方法如下:

function _new(Constru,arguments){
}
const person = _new(Person,arguments)

通过反推,
1、首先_new接受一个构造函数,返回一个对象,那么我们就需要在_new中先创建一个对象:

function _new(Constru){
	let obj = Object.create(null);
	return obj
}

2、传入的构造函数Constru与返回的对象obj需要具有实例与构造函数的关系,即:

Constru.prototype = obj.__proto__

因此我们_new方法将这个关系进行绑定,如下:

function _new(Constru){
	let obj = Object.create(null);
	obj.__proto__=Constru.prototype;
	return obj
}

3、将创建的obj去替换Constru的作用域

function _new(Constru,...arguments){
	let obj = Object.create(null);
	obj.__proto__ = Constru.prototype;
	Constru.call(obj,...arguments)
	return obj;
}

4、以上步骤就基本实现了new的操作,但是构造函数有时候会有一些奇怪的使用方法,比如构造函数会在最后返回一个基本类型值或引用类型值。

对于基本类型的返回值,在构造函数生成实例后不会去理会他;
对于引用数据类型的返回值,生成实例后实例能够调用的属性就只有返回的引用类型的属性。

例如:

// 引用类型
function Person(name,age){
	this.name  = name;
	this.age = age;
	this.getName = function(){
		console.log(this.name)
	};
	this.setName = function(_name){
		this.name = _name
	}
	return {
		name:this.name,
		age:this.age,
		setName:this.setName
	}
}

const person = new Person("xxx",20);
person.name;    // xxx
person.getName();  // Uncaught TypeError: person.getName is not a function
person.setName("fff"); 
person.name;  // fff

// 基本类型
function Person(name,age){
	this.name  = name;
	this.age = age;
	this.getName = function(){
		console.log(this.name)
	};
	this.setName = function(_name){
		this.name = _name
	}
	return "hello"
}

const person = new Person("xxx",20);
person.name;    // xxx
person.getName();  // xxx

因此可以针对这种特殊情况再完善一下_new方法,在将构造函数作用域赋值给新的对象后,检测它的返回值,如果是Object类型则将返回构造函数的返回值。完善后的方法如下:

function _new(Constru,...arguments){
	let obj = Object.create(null);
	obj.__proto__ = Constru.prototype;
	const result = Constru.call(obj,...arguments);
	return result instanceof Object ? result : obj;
}

5、值得注意的是,new一个构造函数生成的实例一般来说应该是构造函数的实例,也就是说能够通过instanceof检测结果应该为true

instanceof的检测原理就是构造函数的原型对象是否在实例的原型链上

之前的写法只是将构造函数的原型对象赋值给了obj的原型对象,这并不能达到继承的目的,因此可以考虑在创建obj时就将构造函数的原型绑定到obj

Object.create()是一种名叫原型式的继承方法
此处通过封装后就相当于组合继承式继承方法

function _new(Constru,...arguments){
	let obj = Object.create(Constru.prototype);
	obj.__proto__ = Constru.prototype;
	const result = Constru.call(obj,...arguments);
	return result instanceof Object ? result : obj;
}

检测结果

// 构造函数无返回值
function Person(name,age){
	this.name  = name;
	this.age = age;
	this.getName = function(){
		console.log(this.name)
	};
	this.setName = function(_name){
		this.name = _name
	}
}
const person = _new(Person,"aaa",20);
person.getName(); // aaa
person instanceof Person // true
person.__proto__ == Person.prototype, // true
person.__proto__.constructor // Person方法

// 构造函数有返回值
function Person(name,age){
	this.name  = name;
	this.age = age;
	this.getName = function(){
		console.log(this.name)
	};
	this.setName = function(_name){
		this.name = _name
	}
	return {
		name:this.name,
		age:this.age,
		setName:this.setName
	}
}
const person = _new(Person,"aaa",20);
person.getName(); // error
person.setName("bbb");
person.name // bbb
// 构造函数返回了一个Object实例的对象,并不是我么在_new中创建的obj,那关于obj的关系绑定此对象也一定无法读到了
person instanceof Person // false
person.__proto__ == Person.prototype, // false
person.__proto__.constructor // Object方法

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值