js手札--bind

RancherLabs 发布于2019-08-19 18:19 / 3367人阅读

摘要：三解决方法使用匿名函数其实看看上面的丢失原因之后，就知道了其实的使用权被对象夺去了，而我们需要让夺回的使用权。结合第一种解决方法，大胆的猜测，的伪实现可以是，相当于返回一个匿名函数。

bind {
 解决问题：callback() { this ? //谁在用 }
}

function callback() {
   console.log(this);
}

function foo(cb) {
  cb();
}

foo(callback);  // 输出的this是谁的呢？  =>  全局window的
foo(callback.bind(callback));  // 输出的this是谁的呢？  =>  callback的
foo(callback.bind(foo));  // 输出的this是谁的呢？  =>  foo的

来看个具体的问题(后面就举了个例子，没兴趣的可以到此为止了。篇幅比较短，见谅) =>

一、问题再现

// 把["x","y",1,2]拷贝到lost.arr中

var lost = {
    arr : [],
    pushArray: function(s) {
        this.arr.push(s);
    }
};

// error 不认识arr
// 因为作用域问题。现在调用pushArray的对象是window，而window是没有arr的
["x","y",1,2].forEach(lost.pushArray);

二、证明问题

那么怎么就能证明是window对象调用了lost.pushArray呢。

window.arr = [];
["x","y",1,2].forEach(lost.pushArray);
console.log(window.arr);

三、解决方法 I.使用匿名函数

其实看看上面的丢失原因之后，就知道了其实pushArray的使用权被window对象夺去了，而我们需要让lost夺回pushArray的使用权。

// 在核心代码前，加一层壳（匿名函数），让window使用这个匿名函数，就解决了
["x","y",1,2].forEach(function(s) { // 匿名函数
    // 核心代码
    lost.pushArray(s);
});

II.使用bind

使用bind就比较优雅了。

["x","y",1,2].forEach(lost.pushArray.bind(lost));

结合第一种解决方法，大胆的猜测，bind的伪实现可以是，相当于返回一个匿名函数。

function bind(me) {
   var fn = this;
   return function() {
       fn.apply(me, arguments);
   }
}

验证一下，哈哈，结果和bind一样哟。

云服务器 idc机房托管 js.bind JS中bind、call和apply的作手札 bind()

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

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

js手札--js中new到底做了些啥

摘要：的三个步骤举个例子正常创建一个对象以上其实等价于个步骤个步骤注两步，其实就是创建一个空对象拷贝构造函数的给实例对象的初始化对象把当做中的，做初始化的操作例如通过其实就相当于 new的三个步骤举个例子： # 正常创建一个对象 function Super() {}; var s = new Super(); 以上其实等价于3个步骤 # 3个步骤 var s = {}; s.__prot...

3fuyu 2019-08-20 11:11 评论0 收藏0
js手札--redux简单学习[ store, action, reducer ]

摘要：简单学习前言是一套流的处理机制。可以说是真正的管理者，其他的，如是命令，是执行命令的士兵。打印初始状态每次更新时，打印日志注意返回一个函数用来注销监听器发起一系列停止监听更新简单学习二 Redux简单学习 - [ store, action, reducer ] 前言 redux是一套state流的处理机制。主要有三要素： store 【长官】管理状态，...

wyk1184 2019-08-19 18:23 评论0 收藏0
js手札--redux简单学习（二）

摘要：简单学习二简单学习，合并多个如有下面两个，，换成，则为则调用时可以写成这样 redux简单学习（二） redux简单学习[ store, action, reducer ] 1. combineReducers combineReducers，合并多个reducer 如有下面两个reducer，todoApp，textApp // reducers/todoApp.js export...

Anleb 2019-08-19 18:24 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

kid143 2019-08-19 18:17 评论0 收藏0