【JS脚丫系列】重温bind

MASAILA 发布于2019-08-26 10:17 / 1708人阅读

摘要：和构造函数构造函数可以使用，然后再次创建实例。提供的值被忽略，提供的那些参数仍然会被前置到构造函数调用的前面。在这种情况下，指向全局作用域。现在将作为的方法来调用，传入这些实参用于构造函数。

概念

bind() 方法会返回一个新函数（称为绑定函数），绑定函数与原函数（使用bind()的函数）具有相同的函数体，但是绑定函数有新的this值和参数。

说白了，bind()就是创建一个有着新this和实参的函数。

语法：

</>复制代码 
funName.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg

</>复制代码 
绑定函数中this的指向。可以是null，undefined，{}，或其他任意对象。可以是另外一个函数。该参数不能被重写。

arg1, arg2, ...

</>复制代码 
可选。传给绑定函数的参数。
作为默认实参传递给绑定函数。

假设参数是一个列表，现在有2种参数，一个是bind的实参参数，一个新的绑定函数中传递的实参参数。bind()的参数在绑定函数的参数的前面。

用法：可以使绑定函数有初始的默认参数。

例子：

</>复制代码 
function funa(){
    "use strict";
    console.log(arguments[0]);//33
    console.log(arguments[1]);//11
    
}
var o = {
    x:1
}
var funb = funa.bind(o,33);
funb(11);//输出33  
  11

兼容性：

支持bind()方法的浏览器有IE9+。

bind和call、apply的差别

bind是ES5新增方法，不会执行对应的函数（call或apply会自动执行对应的函数），而是返回对绑定函数的引用。

call、apply的区别：接受参数的方式不一样。

bind：不立即执行。而apply、call 立即执行。

bind和构造函数

构造函数可以使用bind()，然后再次创建实例。

bind()提供的 this值被忽略，提供的那些参数仍然会被前置到构造函数调用的前面。

</>复制代码 
function Point(x, y) {
    this.x = x;
    this.y = y;
}
Point.prototype.toString = function () {
    return this.x + "," + this.y;
};
var p = new Point(1, 2);
p.toString(); // "1,2"
var YA = Point.bind(null, 0);
var axis = new YA(5);
axis.toString(); // "0,5"
axis instanceof Point; // true
axis instanceof YA; // true
new Point(17, 42) instanceof YA; // true

例子：

</>复制代码 
window.color = "red";
var o = { color: "blue" };
function sayColor() {
    console.log(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue

bind()应用 改变对象的方法的this

目的：使对象的方法在不是这个对象使用时，this的指向依然是这个对象。

原因：创建一个变量，指向为对象的方法，得到一个新函数。这个新函数中的this值已经不再指向原对象了。

</>复制代码 
name = "hello";
var mo = {
    name:2010,
    getName:function(){
        console.log(this.moyu);
        
    }
};
mo.getName();//2010
var newMo = mo.getName;//在这种情况下，"this"指向全局作用域window。
newMo();//hello
var nextMo = mo.getName.bind(mo);
nextMo();//2010

设置默认实参

bind()可以将undefined作为this指向，然后传入默认实参。

用法：

fun.bind(undefined,33);

</>复制代码 
function list(){
   let res = Array.prototype.slice.call(arguments);
    console.log(res);
    
}
list(1,2,3);//[1,2,3]
let newList = list.bind(null,3);
newList();//[3]
newList(1);//[2,1]

配合 setTimeout

在默认情况下，使用setTimeout(function,time); 时，函数的this关键字会指向window。

在原型上的方法中，this是实例对象。使用setTimeout，必须显式的把实例对象绑定到它的函数中，否则this为window对象。

</>复制代码 
function LateBloomer() {
    this.petalCount = Math.ceil(Math.random() * 12) + 1;
}
LateBloomer.prototype.declare = function() {
    console.log("I am a beautiful flower with " +  this.petalCount + " petals!");
};
LateBloomer.prototype.bloom = function() {
    console.log(this);//LateBloomer {patalCount:4};
    
    setTimeout(this.declare.bind(this), 1000);
    //zxy456:2个this都是指向LateBloomer.
    //如果不加bind，setTimeout调用的函数的this为window。declare中的this变为window了。
};
var flower = new LateBloomer();
flower.bloom();  // 一秒钟后, 调用"declare"方法

ES3版本的bind()方法

zyx456思路：将bind(）和函数的参数合并。然后运行apply即可。

</>复制代码 
if (!Function.prototype.bind) {
    Function.prototype.bind = function (o) {
        var self = this, arg = Array.prototype.slice.call(arguments, 1);
        var fbind = function () {
            var arr = [...arg, ...arguments];
            // 现在将self作为o的方法来调用，传入这些实参
            return self.apply(o, arr);
        };
        fbind.prototype = this.prototype;//用于bind构造函数。
        return fbind;
    };
}

云服务器 GPU云服务器 js.bind JS中bind、call和apply的作脚丫 bind()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105906.html

【JS脚丫系列】重温闭包

摘要：内部的称为内部函数或闭包函数。过度使用闭包会导致性能下降。，闭包函数分为定义时，和运行时。循环会先运行完毕，此时，闭包函数并没有运行。闭包只能取得外部函数中的最后一个值。事件绑定种的匿名函数也是闭包函数。而对象中的闭包函数，指向。闭包概念解释：闭包（也叫词法闭包或者函数闭包）。在一个函数parent内声明另一个函数child，形成了嵌套。函数child使用了函数parent的参数...

MartinDai 2019-08-26 10:21 评论0 收藏0
【ES6脚丫系列】箭头函数

摘要：箭头函数本文字符数，阅读时间约分钟左右。箭头函数等于说，只保留了函数的参数和返回。箭头函数体内的，继承的是外层代码块的。所以，不用用箭头函数声明对象的方法。不可以使用命令因此箭头函数不能用作函数。【01】ES6箭头函数本文字符数4300+，阅读时间约8分钟左右。【01】箭头函数等于说，只保留了函数的参数和返回。省略function和return。写法： (形参) => {st...

tinyq 2019-08-26 10:21 评论0 收藏0
【重温基础】14.元编程

摘要：本文是重温基础系列文章的第十四篇。元，是指程序本身。有理解不到位，还请指点，具体详细的介绍，可以查看维基百科元编程。拦截，返回一个布尔值。本文是重温基础系列文章的第十四篇。这是第一个基础系列的最后一篇，后面会开始复习一些中级的知识了，欢迎持续关注呀！接下来会统一整理到我的【Cute-JavaScript】的JavaScript基础系列中。今日感受：独乐乐不如众乐乐...

cc17 2019-08-23 14:34 评论0 收藏0
【ES6脚丫系列】遍历器iterator

摘要：就称为部署了遍历器接口。是一个函数，调用它会生成一个遍历器对象。它的属性，也是一个遍历器对象生成函数，执行后返回它自己。返回遍历器对象。下面是一个无限运行的遍历器对象的例子。『ES6知识点总结』遍历器iterator本文内容如下： 1 具有iterator接口的数据结构 2 遍历器过程 3 遍历器作用： 4 模拟next()方法 5 使用while循环 6 TypeScript的写法...

keke 2019-08-23 18:37 评论0 收藏0
【ES6脚丫系列】模块Module

摘要：命令用于规定本模块的对外接口。空格模块名字符串。其他模块加载该模块时，命令可以为该匿名函数指定任意名字。写法函数声明命令用在非匿名函数前，也是可以的。加载的时候，视同匿名函数加载。本文字符数8200+，阅读时间约16分钟。『ES6知识点总结』模块Module 第一节：Module基本概念【01】过去使用CommonJS和AMD，前者用于服务器，后者用于浏览器。 Module可以取...

gotham 2019-08-26 10:20 评论0 收藏0