学习记录_0908

new

https://juejin.im/post/6844903789070123021

function Test(name) {
    
    
	this.name = name
}
Test.prototype.sayName = function() {
    
    
	console.log(this.name)
}
const t = new Test("张三")
console.log(t.name)  //  张三
t.sayName()   // 张三

结论:

  • new 通过构造函数 Test 创建出来的实例可以访问到构造函数中的属性
  • new 通过构造函数 Test 创建出来的实例可以访问到构造函数原型链中的属性,也就是通过 new
    操作符,实例与构造函数通过原型链连接了起来

构造函数 Test 并没有显示 return 任何值(默认返回 undefined),如果有返回值的话:

function Test(name) {
    
    
	this.name = name
	return 1
}
const t = new Test("张三")
consol.log(t.name)  //  张三

虽然有返回值,但这个返回值没有任何用,得到的结果和之前一样

结论:

  • 构造函数如果返回原始值,name这个返回值毫无意义
function Test(name) {
    
    
	this.name = name
	console.log(this) // Test {name: "张三"}
	return {
    
     age:13}
}
const t = new Test("张三")
console.log(t)  //  {age:26}
console.log(t.name)  //  undefined

虽然构造函数中 this 依旧正常工作,但是当返回值为对象时,这个返回值就会被正常的返回出去。
结论:

  • 构造函数如果返回值为对象,那么这几个返回值会被正常使用

构造函数尽量不要返回值,因为返回原始值不会生效,返回对象会导致new操作符没有用

new的作用:

  • new 会返回一个对象,所以需要在内部创建一个对象
  • 这个对象就是构造函数中的 this,可以访问挂载在 this 上的任意属性
  • 这个对象可以访问到构造函数原型上的属性,所以需要将对象和构造函数链接起来
  • 返回原始值要忽略,返回对象需要正常处理
function create(Con,...args){
    
    
	let obj = {
    
    }
	Object.setPrototypeOf(obj,Con.prototype)
	let result = Con.apply(obj.args)
	return result instanceof Object ? result : obj
}

自己实现new

  1. 首先函数接收不定量的参数,第一个参数为构造函数,接下来的参数被构造函数使用
  2. 然后内部创建一个空对象obj
  3. 应为 obj 需要访问到构造函数原型链上的属性,所以通过setPrototypeOf将两者联系起来 等同于 obj._proto_ = Con.prototype
  4. 将 obj 绑到构造函数上,并传入剩余参数
  5. 判断构造函数返回值是否为对象,如果是对象就使用构造函数返回的值,否则使用 obj,这样就实现了忽略构造函数返回的原始值

猜你喜欢

转载自blog.csdn.net/vigorZ/article/details/108470030
今日推荐