手动实现bind函数

bind函数语法
函数内的this指向
原理分析
- 1.bind函数是函数调用的，而js中函数可以视作对象，当bind作为对象方法时，函数内部this指向该对象本身，那么此时调用this就是调用这个函数对象
- 2.对象方法的this指向该对象本身，所以在bind函数内部的this指向的函数，作为bind函数参数的对象方法即可
- 3.通过原型链，将bind函数作为Function构造函数的对象函数，因为所有函数都继承自Function函数所以所有函数都可以调用bind函数，而不需要手动赋值
缺陷（若有解决方案请在评论区传授一下）

bind函数语法

bind() 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数, 它的参数是 bind() 的其他参数和其原本的参数。

语法：

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

thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时，该参数无效。

arg1, arg2, … （可选）当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

例如：

function fn(a, b, c) {console.log(this);
}var _fn = fn.bind({a:123});
fn(); // 输出：window
_fn(); // 输出：{a:123}

函数内的this指向

原理分析

1.bind函数是函数调用的，而js中函数可以视作对象，当bind作为对象方法时，函数内部this指向该对象本身，那么此时调用this就是调用这个函数对象

例如：

function fun() {console.log("fun被调用");
}
function bind(obj) {console.log("bind中的this:", this);if (typeof this === "function") {this();}
}
bind(); // 输出：bind中的this: window
fun.bind = bind;
fun.bind(); // 输出：1.bind中的this: fun 2.fun被调用

2.对象方法的this指向该对象本身，所以在bind函数内部的this指向的函数，作为bind函数参数的对象方法即可

例如：

function bind(obj) {if (typeof this === "function") {obj.bindThis = this;return () => {obj.bindThis();};}
}
function testThis(obj) {console.log("this:", this);
}
var a = { a: 123 };
testThis.bind = bind;
var fn = testThis.bind(a);
fn();// 输出：this: {a: 123}
testThis(); // 输出：this: Window

3.通过原型链，将bind函数作为Function构造函数的对象函数，因为所有函数都继承自Function函数所以所有函数都可以调用bind函数，而不需要手动赋值

原型链的概念看这里

function bind(obj) {console.log("this:", this);if (typeof this === "function") {obj.bindThis = this;return () => {obj.bindThis();};}}function testThis(obj) {console.log("this:", this);}// bind();var a = { a: 123 }// testThis.bind = bind;Function.prototype.bind = bind;var b = testThis.bind(a); b(); // 输出：this: {a: 123}

缺陷（若有解决方案请在评论区传授一下）

1.原生的bind函数返回的函数不会改变内容，只是改变其this指向

原生：

本次实现：

【JavaScript】bind函数是怎么实现的手动实现bind函数相关推荐

手动实现bind函数（附MDN提供的Polyfill方案解析）
update: 2018-06-08 原文链接为什么要自己去实现一个bind函数? bind()函数在 ECMA-262 第五版才被加入:它可能无法在所有浏览器上运行. 所以,为了理想主义和世界和平 ...
ES6/03/函数的定义方式和调用方式，函数内的this指向，改变函数中this指向的三个方法(call(),apply(),bind())
函数的定义方式 1,自定义函数(命名函数) function fun(){}; 2,函数表达式(匿名函数) var fun =function(){}; 3,利用new Function( '参数1' ...
翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 第 4 章：组合函数...
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
apply、call、bind三者的区别—附：防抖、节流函数
apply.call.bind三者的区别相同点 1.1 三者都能改变函数中的this指向 1.2 第一个参数都是是要改变的this指向的对象不同点 2.1.第二个参数:apply传的是参数数组:c ...
前端设计模式学习笔记（面向对象JavaScript, this、call和apply, 闭包和高阶函数）...
JavaScript通过原型委托的方式来实现对象与对象之间的继承. 编程语言可分为两大类:一类是静态类型语言,另一类是动态类型语言 JavaScript是一门动态类型语言鸭子类型的概念(如果它走起来 ...
C++对象模型3——vptr的位置、手动调用虚函数、从汇编代码看普通调用和多态调用
一.vptr的位置 class test { public:int i; virtual void testfunc() {} };int main() {test a;char* p1 = rein ...
JavaScript对象this指向(普通键this指向非指向函数的键)
1.结论 JavaScript对象普通键(非指向函数的键)this指向是window. 2.示例 <!DOCTYPE html> <html lang="zh"& ...
函数的方法call、apply、bind
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JavaScript从入门到精通之入门篇（二）函数和数组
入门篇大纲第二部分函数与数组 1.函数函数的定义普通函数 function 函数名 (表达式1-) { 代码块 } js是解释性语言,在当前script标签代码执行的开始阶段,就会将普通函数放 ...

【JavaScript】bind函数是怎么实现的手动实现bind函数

手动实现bind函数

bind函数语法

函数内的this指向

原理分析

1.bind函数是函数调用的，而js中函数可以视作对象，当bind作为对象方法时，函数内部this指向该对象本身，那么此时调用this就是调用这个函数对象

2.对象方法的this指向该对象本身，所以在bind函数内部的this指向的函数，作为bind函数参数的对象方法即可

3.通过原型链，将bind函数作为Function构造函数的对象函数，因为所有函数都继承自Function函数所以所有函数都可以调用bind函数，而不需要手动赋值

缺陷（若有解决方案请在评论区传授一下）

【JavaScript】bind函数是怎么实现的手动实现bind函数相关推荐

最新文章

热门文章

【JavaScript】bind函数是怎么实现的 手动实现bind函数

手动实现bind函数

bind函数语法

函数内的this指向

原理分析

1.bind函数是函数调用的，而js中函数可以视作对象，当bind作为对象方法时，函数内部this指向该对象本身，那么此时调用this就是调用这个函数对象

2.对象方法的this指向该对象本身，所以在bind函数内部的this指向的函数，作为bind函数参数的对象方法即可

3.通过原型链，将bind函数作为Function构造函数的对象函数，因为所有函数都继承自Function函数所以所有函数都可以调用bind函数，而不需要手动赋值

缺陷（若有解决方案请在评论区传授一下）

【JavaScript】bind函数是怎么实现的 手动实现bind函数相关推荐

最新文章

热门文章

【JavaScript】bind函数是怎么实现的手动实现bind函数

【JavaScript】bind函数是怎么实现的手动实现bind函数相关推荐