前言
大家好 我是歌谣 上节课我们已经说过了关于手写apply和手写call的讲解
这节课我们继续来进行手写bind的讲解
bind演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写bind.html</title>
</head>
<body>
<script>
var geyao = {
name: "geyao",
show() {
console.log(this, "this")
console.log(` 我是${this.name}`)
}
}
var fangfang = {
name: "fangfang"
}
let fn=geyao.show.bind(fangfang)
fn()
</script>
</body>
</html>
运行结果
分析
核心的功能就是第一会改变this的指向 第二函数不会立刻执行
代码
var geyao = {
name: "geyao",
show() {
console.log(this, "this")
console.log(` 我是${this.name}`)
}
}
var fangfang = {
name: "fangfang"
}
Function.prototype.myBind = function (content, args) {
let fn = Symbol('geyao')
fn = this
return function Fn() {
// 这里arguments的作用是拿到Fn中传入的参数
return fn.call(content, args)
}
}
let fn = geyao.show.myBind(fangfang)
fn()
运行结果
思考
这里还需要对new bind进行一个实现 不是上述所说的这么简单
function geyao() {
this.fangfang = 'fangfang';
}
var geyaoFoo = geyao.bind();
var obj = new geyaoFoo();
console.log(obj.fangfang);
运行结果
最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写bind2.html</title>
</head>
<body>
<script>
Function.prototype.myBind = function (context, ...args) {
let geyao = Symbol('geyao')
geyao = this
return function Fangfang() {
if (this instanceof Fangfang) {
return new geyao(...args, ...arguments)
}
return geyao.call(context, arguments)
}
}
function geyao() {
this.fangfang = 'fangfang';
}
var geyaoFoo = geyao.myBind();
var obj = new geyaoFoo();
console.log(obj.fangfang);
</script>
</body>
</html>
运行结果
原文链接：https://juejin.cn/post/7259768679344619578 作者：歌谣
