Prototype.bind

最新推荐文章于 2021-07-04 21:06:16 发布
最新推荐文章于 2021-07-04 21:06:16 发布
阅读量271 收藏
点赞数
分类专栏： JS

一、控制给一个给定函数的作用域

1.1 使用bind()方法

<script>
        window.onload = function () {
            window.name = "window";

            var data = {
                name: "testObject",

                sayOne: function () {
                    console.log("1111" + this.name);
                    sayTwo = function (type) {
                        console.log(type + " " + this.name);
                    };//.bind(this);

                    sayTwo("2222");
                }
            };
            data.sayOne("****");
        };
    </script>

<script>
        window.onload = function () {
            window.name = "window";

            var data = {
                name: "testObject",

                sayOne: function () {
                    console.log("1111" + this.name);
                    sayTwo = function (type) {
                        console.log(type + " " + this.name);
                    }.bind(this);

                    sayTwo("2222");
                }
            };
            data.sayOne("****");
        };
    </script>

this关键字表示函数的所有者或作用域。
在该解决方案中，字面值对象的一个方法sayOne()，其中包含一个嵌套的sayTwo()函数。
没有使用bind()方法，打印出的消息大相径庭，原因在于，嵌套的函数与包围的对象的内部函数分离开了，并且无作用域的函数自动变成窗口对象的属性。bind()方法所做的就是，使用apply()方法把函数绑定到传递给对象的对象。使用bind()方法可将其绑定到父对象。

1.2 bind()与定时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="item"> 
        20
    </div>
    <script>
        var theCounter = new Counter('item', 20, 0);
        theCounter.countDown();

        function Counter(id, start, finish) {
            this.str = this.start = start;
            this.finish = finish;
            this.id = id;
            this.countDown = function () {
                if (this.str == this.finish) {
                    this.countDown = null;
                    return;
                }
                document.getElementById(this.id).innerHTML = this.str--;
                setTimeout(this.countDown.bind(this), 1000);
            };
        }
    </script>
</body>
</html>

1.3 self与this

使用bind()的替代方法，就是将this赋值给外部函数中的一个变量，该变量随后在尾部可供使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="item"> 
        20
    </div>
    <script>
        var theCounter = new Counter('item', 20, 0);
        theCounter.countDown();

        function Counter(id, start, finish) {
            var self = this;

            this.str = this.start = start;
            this.finish = finish;
            this.id = id;
            this.countDown = function () {
                if (this.str == this.finish) {
                    this.countDown = null;
                    return;
                }
                document.getElementById(this.id).innerHTML = this.str--;
                setTimeout(this.countDown.bind(self), 1000);
                //setTimeout(this.countDown, 1000);//若没有bind()，当定时器内部调用该方法的时候，对象作用域和计数器已经丢失了
            };
        }
    </script>
</body>
</html>

 

Abel_01_xu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 学习笔记：Function.prototype.bind()
jieming2002的博客
11-13 498
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 1.什么是绑定函数？ bind()方法创建一个新的函数，当这个新函数被调用时其this置为提供的值，其参数列表前几项置为创建时指定的参数序列。 第一次看到这句话时，没看懂，看了下面的实例，才明白了： v...
搞懂JavaScript的Function.prototype.bind[译]
weixin_34348805的博客
03-19 114
搞懂JavaScript的Function.prototype.bind[译] Ben Howdle binding可能是初学Javascript的人最不关心的函数，当你意识到需要『保持this在其他函数中的上下文』，实际上你需要的是Function.prototype.bind()。 你第一次碰到问题的时候，你可能倾向于把this赋值给...
JavaScript中的prototype.bind()方法介绍
orichisonic的专栏
02-06 1269
以前，你可能会直接设置self=this或者that=this等等，这样做当然也能起作用，但是使用Function.prototype.bind()会更好，看上去也更专业。 下面举个简单的例子： 复制代码代码如下: var myObj = {     specialFunction: function () {     },     anotherSpecialFu
Function.prototype.bind、call与apply方法简介
weixin_30615767的博客
08-31 139
前言 前段时间面试遇见一题，题目内容大概是 function Parent() { this.prop = 'parent'; } Parent.prototype.get = function() { alert(this.prop); }; Parent.prototype.show = function() { setTimeout(t...
js中的bind方法并模拟实现自己的bind方法
前端三脚猫的博客
07-04 496
Js中bind方法使用和实现 前面我们已经模拟实现了call和apply方法，今天来实现下同样可以改变this指向但是又有点不同得方法 bind方法。 定义 首先来看下bind方法在mdn中得定义，bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。 语法 function.bind(thisArg[, arg1[, arg2[, …]]]) 参数 thisArg 调用绑定函数时作为 th
prototype中的bind方法
signingoff
08-06 125
[code="js"] var Cat = Class.create(); Cat.prototype = { initialize:function(name){ this.name = name; }, show:function(){ alert('show!!!'); } } var Dog = Class.crea...
JavaScript 中 call()、apply()、bind() 的用法
我不萌的专栏
04-08 491
注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。
【原创】关于Function.prototype.bind()的一些事
boyzhaotian的博客
11-07 463
关于Function.prototype.bind()的一些事 我们先来看一下下面这题： var x = 0 var func = function () { console.log(this.x) } var obj1 = { x: 1 } var obj2 = { x: 2 } var obj3 = { x: 3 } var func1 = func.bind(obj1) func...
深入理解JS中的Function.prototype.bind()方法
11-22
前言 对于函数绑定(Function binding)很有可能是大家在使用JavaScript时最少关注的一点，但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候，你真正需要的其实就是 Function.prototype.bind() ，只是你有可能仍然没有意识到这点。 第一次遇到这个问题的时候，你可能倾向于将this设置到一个变量上，这样你可以在改变了上下文之后继续引用到它。 一. bind的语法 bind() 方法的主要作用就是将函数绑定至某个对象，bind() 方法会创建一个函数，函数体内this对象的值会被绑定到传入bind() 函数的值。 1.1 定
从Function.prototype.call.bind(Object.prototype.toString())说起
m0_47182386的博客
06-15 365
看到这个写法，当时有些懵，弄了半天，才找到了一个合理的解释。想着，还是Object.prototype.toString.call()这个好理解一些。 bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，例如：f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj 所以Function.prototype.call.bind(Object.prototype.toStri
js中Function.prototype的bind()方法－学习笔记
caomingwumr8的博客
10-06 595
bind绑定this： var objA={name:"jeep",say:function(){console.log(this.name)}}, objB={name:"bus",say:function(){console.log(this.name)}};  var bined=objA.say.bind(objB);  bined(); bind科理化： function test(x
Function.prototype.bind方法的实现原理
shangsiqi1的博客
11-29 286
Function.prototype.bind = Function.prototype.bind || function(context) { var me = this; var args = Array.prototype.slice.call(arguments, 1); return function() { ...
JavaScript 之 Object.apply()与Object.call()和Object.bind()
为了而努力
07-19 7502
1. apply()apply()调用一个方法，其具有一个指定的this 值，以及作为一个数组（或类似于数组的参数）。 注意：apply()和call()方法的作用很类似，只有一个区别，那就是call()方法接受的是若干个参数的列表，而apply()接受的是包含多个参数的数组。 语法fun.apply(thisArg, [argsArray])参数 thisArg 在 fun 函数运行时指
Function原型上的方法-bind()实现原理（Function.prototype.bind）
pony的博客
01-29 1285
//=>JS中把基于闭包预先处理事情的思想叫做：柯理化函数思想（体现了闭包的保存作用） Function.prototype.myBind = function myBind(context) { //=>this:fn也就是我们需要处理的函数 var _this = this, outerAry = [].slice.call(arguments, 1);//=>
ES5新增函数之二: Function.prototype.bind();
LiuHe
04-02 3996
在上一篇文章里我们分析了ES5对几个常用类新增的函数，今天就重点来讲解一下Function中的bind函数。 简单来说，bind函数用于将当前函数和指定对象绑定，返回一个新的函数，当新函数被调用时，代码会在指定对象的上下文中执行。 这就涉及到JavaScript程序执行上下文Context的知识了，在JavaScript中函数内部如果存在与Context有关的代码，如果我们在调用之前改变其Context，那么执行结果就不同，这一点我们可以用一个最基本的例子来说明：
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
07-28
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
智慧校园整体解决方案-6PPT(102页).pptx
07-28
智慧校园整体解决方案是响应国家教育信息化政策，结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础，旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变，通过自动数据采集、智能分析和按需服务，实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通，确保系统能够满足不同用户角色的需求，并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面，构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等，以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能，增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术，实现人员和设备的智能管理，提高校园运营效率。 智慧教学部分，方案提供了智慧学习系统和精品录播教室方案，支持专业级学习硬件和智能化网络管理，促进个性化学习和教学资源的高效利用。同时，教学质量评估中心和资源应用平台的建设，旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理，通过智慧教室管理系统实现教室环境的智能控制和能效管理，打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设，将作为智慧校园的核心和入口，提供教务、一卡通、图书馆等系统的集成信息。 总体而言，智慧校园整体解决方案通过集成先进技术，不仅提升了校园的信息化水平，而且优化了教学和管理流程，为学生、教师和家长提供了更加便捷、个性化的教育体验。
anaconda配置pytorch环境.pdf
最新发布
07-28
使用Anaconda配置PyTorch环境是一个相对直接的过程，以下是一个详细的步骤指南，包括Anaconda的下载与安装、PyTorch环境的创建以及PyTorch的安装与验证。 一、Anaconda的下载与安装 1.访问Anaconda官网： 1.前往Anaconda官网下载最新版本的Anaconda。 2.下载Anaconda： 1.在官网首页，点击“Free Download”按钮，选择合适的操作系统版本进行下载。 3.安装Anaconda： 1.双击下载好的Anaconda安装包，按照提示进行安装。 2.注意选择安装路径（建议不安装在C盘），并确保安装路径为全英文。 3.安装过程中，根据需要选择“为所有用户安装”或“仅为当前用户安装”。 4.验证Anaconda安装： 1.安装完成后，打开“Anaconda Prompt”（或Anaconda Navigator），输入conda --version查看conda版本，以验证Anaconda是否安装成功。 二、创建PyTorch环境 1.打开Anaconda Prompt： 1.在开始菜单中找到并打开“Anaconda Pro
function polyfillBind (fn, ctx) { function boundFn (a) { var l = arguments.length; return l ? l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a) : fn.call(ctx) } boundFn._length = fn.length; return boundFn } function nativeBind (fn, ctx) { return fn.bind(ctx) } var bind = Function.prototype.bind ? nativeBind : polyfillBind;
05-31
这是一段 JavaScript 代码，用于实现函数绑定（bind）功能。它定义了两个函数：polyfillBind 和 nativeBind。其中，polyfillBind 函数用于在不支持原生 bind 方法的环境中模拟 bind 方法，而 nativeBind 函数则直接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值