浅析function.prototype.bind

作用:

对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数。

bind最直接的作用就是改变this的指向:

// 定义函数
 var checkNumericRange = function (value) {
     if (typeof value !== ‘number‘)
         return false;
     else
         return value >= this.minimum && value <= this.maximum;
 }

 // 定义对象
 var range = { minimum: 10, maximum: 20 };

这时因为作用域不符,checkNumricRange不能操作range对象的属性。

我们该如何做呢?

答案是修改this的值。把函数内部的this修改为range对象,这样这个函数就可以访问range的属性。

通过bind可以很好的实现。

// 限定函数的this值为range,返回一个新的函数
 var boundCheckNumericRange = checkNumericRange.bind(range);

 // 使用新生成的函数。
 var result = boundCheckNumericRange (12);
 document.write(result);//  true

让我们分析分析checkNumricRange.bind(range)都做了什么?

通过bind方法,将this的值修改为range对象,返回一个新函数,这个函数this值是range,但函数的功能没有改变。

Function.prototype.bind原理解析

内部原理有一点点绕人,

下面给出一个简化的bind代码:

Function.prototype.bind = function (scope) {
    var fn = this;//这里fn为this,也就是调用bind的函数,方便下面调用
    return function () {//返回的是一个可以运行函数
        return fn.apply(scope);//利用apply方法,使用scope对象调用fn,
    };
}    
//简单的测试用例

var foo = {
    x: 3
}

var bar = function(){
    console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3
时间: 2025-01-01 21:01:36

浅析function.prototype.bind的相关文章

Function.prototype.bind接口浅析

本文大部分内容翻译自 MDN内容, 翻译内容经过自己的理解. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind Function.prototype.bind Syntax fun.bind(thisArg[, arg1[, arg2[, ...]]]) Parameters thisArg The value to be passed as the thi

浅析 JavaScript 中的 Function.prototype.bind() 方法

Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数的值. 例如,在 f() 函数上调用 bind() 方法并传入参数 obj ,即 f.bind(obj) ,这将返回一个新函数, 新函数会把原始的函数 f() 当做 obj 的方法来调用,就像 obj.f() 似的,当然这时 f() 函数中的 this 对象指向的是 obj . 简单使用情形一 va

《javascript设计模式与开放实践》学习(一)Function.prototype.bind

使用Function.prototype.bind来包装func函数 1.简化版的bind Function.prototype.bind=function (context) { var self=this; //保存原函数 return function () { return self.apply(context,arguments); } }; var obj={name:'seven'}; var func=function(){ alert(this.name); }.bind(ob

Function.prototype.bind

解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的指向 // 定义函数 var checkNumericRange = function (value) { if (typeof value !== 'number') return false; else return value >= this

理解 JavaScript 中的 Function.prototype.bind

函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind(),只是你有可能仍然没有意识到这点. 第一次遇到这个问题的时候,你可能倾向于将this设置到一个变量上,这样你可以在改变了上下文之后继续引用到它.很多人选择使用 self, _this 或者 context 作为变量名称(也有人使用 that)

一个简易版的Function.prototype.bind实现

重新看<JavaScript设计模式与开发实践>一书,第32页发现个简易版的Function.prototype.bind实现,非常容易理解,记录在这了. Function.prototype.bind = function (context) { var self = this; return function () { return self.apply(context, arguments); }; }; var obj = { name: 'sven' }; var func = fu

Function.prototype.bind 简介

bind可以解决两种问题: 1. 可以改变一个函数的 this 指向 2. 可以实现偏函数等高阶功能 本文暂且讨论第一个功能 USE CASE var foo = { x: 3 } var bar = function(){ console.log(this.x); } bar(); // undefined var boundFunc = bar.bind(foo); boundFunc(); // 3 简易版实现方式 Function.prototype.bind = function (s

解析Function.prototype.bind

简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的指向 // 定义函数 var checkNumericRange = function (value) { if (typeof value !== 'number') return false; else return value >= this.minimum && value &l

Function.prototype.bind相关知识点

1 var addNum = { // 创建一个方法,给val的值 加num 2 num: 5, 3 fun: function(val) { 4 return this.num + val; 5 } 6 } 7 8 Function.prototype.bind = function(obj){ // Function是对象,prototype.bind是给对象增加一个新方法 9 var method = this; 10 return function(){ 11 return method