ES6下的Function.bind方法

在JavaScript的使用中,this的指向问题始终是一个难点。不同的调用方式,会使this指向不同的对象。而使用call,apply,bind等方式,可改变this的指向,完成一些令人惊叹的黑魔法

最近了解了一下Function对象下的bind方法,同时对JavaScript对象下this指向,call,apply等方法有了更深刻的了解

function.apply(thisArg,[argsArray])

thisArg: function函数运行时的this值

argsArray: 一个数组或者类数组对象,其中的数组元素将作为单独的参数传给function函数

returns: 调用this值和和参数产生的结果

下面讲述一些apply的简单使用

  • 用apply 将数组push 进另一个数组
1234
var elements = [1,2,3]var arr = ['a'];Array.prototype.push.apply(arr,elements)console.log(arr,elements)
  • 找出数组中最大/最小的数
1234
var nums = [1,2,3,4,5]var max = Math.max.apply(null,nums)var min = Math.min.apply(null,nums)console.log(max,min)

function.call(thisArg,arg1,args2,args3)

thisArg: function函数运行时的this值

arg1, arg2, …:  指定的参数列表。

returns: 调用this值和和参数产生的结果

function.call 与 function.apply 的本质其实是一样的。只有一个区别,就是 call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组

function.bind(thisArg,arg1,arg2,…)

thisArg: function函数运行时指向的this值

arg1,arg2,…: 当目标函数被调用时,预先添加到绑定函数的参数列表中的参数。

returns: 返回一个原函数的拷贝,并拥有指定的this值和初始参数。

  • 创建绑定函数

bind()的另一个最简单的用法是使一个函数拥有预设的初始参数。只要将这些参数(如果有的话)作为bind()的参数写在this后面。当绑定函数被调用时,这些参数会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们后面。

12345678910111213141516
this.x = 9;    var module = {  x: 81,  getX: function() { return this.x; }};

module.getX(); // 81

var retrieveX = module.getX;retrieveX();   // 返回9 - 因为函数是在全局作用域中调用的

// 创建一个新函数,把 'this' 绑定到 module 对象// 新手可能会将 大专栏  ES6下的Function.bind方法全局变量 x 与 module 的属性 x 混淆var boundGetX = retrieveX.bind(module);boundGetX(); // 81

bind函数的初步实现

bind的实质,其实为call的语法糖。我们只需返回一个利用Function.call改变this指向的函数即可

123456789101112131415161718
Function.prototype.bindDemo = function(obj,args){    let arg = Array.prototype.slice.call(arguments,1);    const that = this;    return function(){       args = arg.concat(Array.prototype.slice.call(arguments));       return that.apply(obj,args);    }}const o = {    name:'yyx',    age:'20',    getAge(){        console.log(this.age);    }}const getAge = o.getAge;const bindGetAge = getAge.bindDemo(o)bindGetAge()    //20

将bind函数绑定在原型链上

上面的函数已经可以解决一些实际问题,但依旧存在一些问题。当thisArg为原型链上的对象时,bind对象需要能调用原型上的方法。

1234567891011121314151617181920
Function.prototype.bindDemo = function(obj,args){    let arg = Array.prototype.slice.call(arguments,1);    const that = this;    let tmp =  function(){       args = arg.concat(Array.prototype.slice.call(arguments));       return that.apply(obj,args);    }    tmp.prototype = this.prototype;    return tmp;}const o = {    name:'yyx',    age:'20',    getAge(){        console.log(this.age);    }}const getAge = o.getAge;const bindGetAge = getAge.bindDemo(o)bindGetAge()   //20

原文地址:https://www.cnblogs.com/lijianming180/p/12026659.html

时间: 2024-10-03 22:14:10

ES6下的Function.bind方法的相关文章

IE8支持function.bind()方法

这个 bind 方法仅仅有在 ie10 版本号的浏览器才得到原生支持,低于该版本号的浏览器下运行时会得到一个 undefined 的错误提示.于是仅仅好再次上网 google 解决方式,功夫不负有心人,我们在 firefox 的开发站找到了解决方式,那就是添加 property 原型使得全部浏览器都能支持 bind 方法,代码例如以下: <script type="text/javascript"> if (!Function.prototype.bind) { Funct

浅析 JavaScript 中的 Function.prototype.bind() 方法

Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数的值. 例如,在 f() 函数上调用 bind() 方法并传入参数 obj ,即 f.bind(obj) ,这将返回一个新函数, 新函数会把原始的函数 f() 当做 obj 的方法来调用,就像 obj.f() 似的,当然这时 f() 函数中的 this 对象指向的是 obj . 简单使用情形一 va

浅谈用原生 js 实现函数的 bind 方法

bind的作用是让目标函数执行时候的 this 改为指定的上下文. 一般情况下,this 取决于调用者,谁调用函数 this 就是谁(自执行函数.定时器--之类的特殊情况除外). 有那么一句话,在 JavaScript 中,万物皆对象. 1 var want = function want() { 2 console.log(this); 3 } 4 5 var good = function good() { 6 console.log('https://www.cnblogs.com/xwa

javascript中利用柯里化函数实现bind方法

柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @param con

理解JS中的call、apply、bind方法

理解JS中的call.apply.bind方法(*****************************************************************) 在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:apply . call .bind 三者都是用来改变函数的this对象的指向的:apply . call .bind 三者

call() 、 apply() 、bind()方法的作用和区别!

从一开始,我是在书上看到关于bind().call() 和 apply(), 不过长久以来,在工作中与网上接触到了很多关于这三个方法的使用场景,对这三个方法也算是比较熟悉了.所以把他们的作用和区别简单阐述一下! javaScript权威指南上的解释是: call() .apply()可以看作是某个对象的方法,通过调用方法的形式来间接调用函数.bind() 就是将某个函数绑定到某个对象上. 关于call() 和 apply() 在犀牛书上的解释可能比较生涩难懂,我的理解就是,它们的作用是: 让函数

Javascript中bind()方法的使用与实现

我们先来看一道题目 1 2 3 4 var write = document.write;  write("hello");  //1.以上代码有什么问题 //2.正确操作是怎样的 不能正确执行,因为write函数丢掉了上下文,此时this的指向global或window对象,导致执行时提示非法调用异常,所以我们需要改变this的指向 正确的方案就是使用 bind/call/apply来改变this指向 bind方法 1 2 var write = document.write; wr

【转载】JS中bind方法与函数柯里化

原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table),权威指南上提到在ES3中利用apply模拟该方法的实现(JS权威指南中函数那章), 但无法真实还原该方法, 这也是真bind方法中的有趣特性. (原文这边理解有问题, 这段话的意思如果结合犀牛书上下文的意思, 再结合犀牛书中

JS中的call、apply、bind方法详解

bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向.JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. function fruits() {} fruits.prototype = { color: "red&