前端笔记之手写bind

前言

大家好我是歌谣上节课我们已经说过了关于手写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);

运行结果

在这里插入图片描述

最终代码

```bash

手写bind2.html

```

运行结果

在这里插入图片描述

posted @ 2023-07-26 09:27 前端导师歌谣阅读(25) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 手写bind

· 前端中手写call面试题

· 「跟着渡一学前端」手写bind函数

· 手写bind

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

前端笔记之手写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>

	let fn = Symbol('geyao')
	fn = this
	return function Fn() {
	// 这里arguments的作用是拿到Fn中传入的参数
	return fn.call(content, args)
	}
	}
	let fn = geyao.show.myBind(fangfang)
	fn()

	function geyao() {
	this.fangfang = 'fangfang';
	}
	var geyaoFoo = geyao.bind();
	var obj = new geyaoFoo();
	console.log(obj.fangfang);

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

前端笔记之手写bind

前言

bind演示

运行结果

分析

代码

运行结果

思考

运行结果

最终代码

运行结果

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识