js高级：手写实现apply/call/bind

最新推荐文章于 2024-07-18 10:24:18 发布

piaoyecanfeng

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量121

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/piaoyecanfeng/article/details/127338960

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、实现apply/call

function foo(name,age){
	console.log(this,name,age)
}
// foo 函数可以通过apply/call
// foo.apply("aaa",["why",18])
// foo.call("bbb","kobe",30)

Function.prototype.hyexec= function(thisArg,otherArgs){
	// this -> 通用的函数对象
	// thisArg -> 传入的第一个参数，要绑定的this
	// console.log(this) // -> 当前调用的函数对象
	// this.apply(thisArg)
	
	// 1、获取thisArg，并且确保是一个对象类型
	thisArg = (thisArg === null || thisArg === unndefined) ? window:Object(thisArg)
	// thisArg.fn = this
	Object.defineProperty(thisArg,"fn",{
		enumerable:false,
		configurable:true,
		value:this
	})
	thisArg.fn(...otherArgs)
	delete thisArg.fn
}

// 1、给函数对象添加方法：hyapply
Function.prototype.hyapply = function(thisArg,otherArgs){
	this.hyexec(thisArg,otherArgs)
}
Function.prototype.hycall = function(thisArg,...otherArgs){
	this.hyexec(thisArg,otherArgs)
}
foo.hyapply({name:"why"},["james",25])
foo.hyapply(123,["why",18])

foo.hycall({name:'why'},"james",25)
foo.hycall(123,"why",18)
foo.hycall(null,"kobe",30)

2、bind实现

function foo(name,age,height,address){
	console.log(this,name,age,height,address)
}
// Function.prototype
// var newFoo = foo.bind({name:"why"},"why",18)
// newFoo(1.88)

// 实现hybind函数
Function.prototype.hybind = function(thisArg,...otherArgs){
	thisArg = thisArg === null || thisArg ===undefined ? window : Object(thisArg)
	Object.defineProperty(thisArg,"fn",{
		enumerable:false,
		configurable:true,
		writable:false,
		value:this
	})
	return (...newArgs) =>{
		var allArgs = [...otherArgs,...newArgs]
		thisArg.fn(...allArgs)
	}
}
var newFoo = foo.hybind("abc","kobe",30)
newFoo(1.88,"北京市")