bind call 深入理解

前言,对待知识 要有追根溯源的决心。 一次记不住,那就再来一次,,那就一行一行解析,再试一次;同样的知识可以记忆 2,次3次,4次,直到我真真理解了 每一句话的意思和思想。品味其中的道理(2019/4/30 于 宜信集团)

知识点1:首先: bind 是改变context 指向的挂载在Function 内置构造函数身上的方法

例如 : function foo() { this.b = 100; return this.a; } var func = foo.bind({a:1}); func(); // 1

但是!但是, 如果你操作 new func(); // {b : 100}      为什么呢?  new操作符号 实例化 一个对象,会创造this 指向和内存空间,强制this 指向

这是注意点的一点, 具体可以查阅 js new 操作符号的作用和解析;

知识点2:  原理简单实现 (柯里化、this 绑定问题)

Function.prototype.yykbind= function (context) {
    var fn = this;                    // this 指向的是调用 testBind 方法的一个函数, 对!! 小函数是Function的实例 知识要串一下
    return function () {
        return fn.apply(context)
    }
};

简单创造处了具有简单bind 功能的 yykbind 函数

知识点3

https://juejin.im/post/5cb7e348e51d456e7b37206d

bind 之后是是不能再次bind 的,或者说再次的bind 是无效的

从es5文档中我们能找到答案

如果我们在一个由bind创建的函数中调用call,假设是x.call(obj,y,z,…)并且传入this,和参数列表的时候会执行下面的步骤: 


1.首先用三个参数分别保存函数x函数的内部属性中存的this值、目标函数和参数 列表。 


2.然后执行目标函数的内部call函数,也就是执行目标函数的代码,并且传入1中保存的this和实参(这里的实参是目标函数本来就有的也就是bind时传入的实参加上调用call时传的实参) 


重点在1中,从es5的bind函数说明中我们知道,当我们用一个函数调用bind的时候,返回的函数中会保存这三个参数。所以最后调用call的时候执行的函数是目标函数,也就是调用了bind的函数,传入的this也是bind调用时传入的,这些都是无法被修改的了,但是参数是调用bind和call时的叠加,这是我们唯一可以修改的地方。执行两次bind的原理可以参考bind的源码,和call的差不多,也是目标函数和this是被固定的了,只有参数列表会叠加。!

另外 附属  call 的 原理 (仔细阅读体会!!!!切记 读个两三次)

Function.prototype.es6Call = function (context) {

var context = context || window;

context.fn = this;

var args = [];

for (var i = 1, len = arguments.length; i < len; i++) {

args.push('arguments[' + i + ']');

}

const result = context.fn(...args);

return result;

}

发布了124 篇原创文章 · 获赞 10 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_40774743/article/details/89711049
今日推荐