说下js中的bind

bind的受体是对象,返回的是个新的函数。 我们知道this总是指向调用他的对象。但是有时候我们希望‘固化’这个this。 也就是无论怎么调用这个返回的函数都有同样的this值。 这就是bind的作用。

语法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

参数

thisArg

当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new操作符调用绑定函数时,该参数无效。 this将永久地被绑定到了bind的第一个参数,无论这个函数是如何被调用的。

arg1, arg2, ...

当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。

返回值

返回由指定的this值和初始化参数改造的原函数拷贝

例1

window.color = 'red';
var o = {color: 'blue'};

function sayColor(){
  alert(this.color);
}
var func = sayColor.bind(o);
// 输出 "blue", 因为传的是对象 o,this 始终指向 o
func();

var func2 = sayColor.bind(this);
// 输出 "red", 因为传的是this,在全局作用域中this代表 window。等于传的是 window。
func2();

例2

注意:bind只生效一次

function f(){
  return this.a;
}

//this被固定到了传入的对象上
var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); //bind只生效一次!
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

例3

var myObj = {
    specialFunction: function () {
    },
    anotherSpecialFunction: function () {
    },
    getAsyncData: function (cb) {
        cb();
    },
    render: function () {
       // 注意这里,写成 this.specialFunction() 会报错
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

// 使用 bind 优化
// 当myObj 调用,this就指向了myObj
render: function () {
    this.getAsyncData(function () {
        this.specialFunction();
        this.anotherSpecialFunction();
    }.bind(this));
}

例4

使用bind可少写匿名函数

<button>Clict Me!</button>
<script>
var logger = {
  x: 0,
  updateCount: function(){
    this.x++;
    console.log(this.x);
  }
}


// document.querySelector('button').addEventListener('click', function(){
//   logger.updateCount();
// });
// 优化后
// 因为bind返回就是新的函数,不用再写匿名函数了。
document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger))

参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/#what-problem-are-we-actually-looking-to-solve

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

Java魔法堂:String.format详解

  目录                               一、前言 二、重载方法 三、占位符 四、对字符、字符串进行格式化 五、对整数进...

2438
来自专栏坚毅的PHP

golang使用 mongo

 连接集群 mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:por...

3065
来自专栏运维小白

9.4sed(上)

sed工具 sed -n '5'p test.txt sed -n '1,5'p test.txt sed -n '1,$'p test.txt sed -n ...

1868
来自专栏鸿的学习笔记

Python漫谈

列表切片的标准是lst[a:b:c] a是列表切片的开头,b是切片的结尾,c是step。 这里的表示从第一个元素开始,按照每隔一步,到第三个元素结束

1013
来自专栏Petrichor的专栏

python: copy库 与 list拷贝

1381
来自专栏吴伟祥

MySQL中字节、编码、长度、值的关系 原

0.一个汉字占多少字节与编码有关:          UTF-8:一个汉字=3个字节             GBK:一个汉字=2个字节  1.var...

953
来自专栏C/C++基础

C++终结类

C++如何实现不能被继承的类,即终结类。Java中有final关键字修饰,C#中有sealed关键字修饰,C++11之前还没有类似的关键字来修饰类实现终结类,需...

1002
来自专栏文武兼修ing——机器学习与IC设计

JavaScript入门笔记(2)字符串相关列表对象

字符串相关 字符串基础 字符串历来是各种编程语言坑最多的地方(个人认为),不同软件语言在字符串上的操作的差别比软件语言和硬件描述语言的差距都大(一样是个人认为)...

3176
来自专栏C/C++基础

C++实现不能被继承的类——终结类

C++如何实现不能被继承的类,即终结类。Java中有final关键字修饰,C#中有sealed关键字修饰,而C++目前还没有类似的关键字来修饰类实现终结类,需编...

822
来自专栏mukekeheart的iOS之旅

Java基础学习(学习IT企业必读的324个JAVA面试题.pdf 整理)

一、Java程序基础 javac 文件名.java    编译程序    java 类名               运行java程序 代码规范中,一下几点要注...

2249

扫码关注云+社区

领取腾讯云代金券