在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 进另一个数组
1
2
3
4
var elements = [1,2,3]
var arr = ['a'];
Array.prototype.push.apply(arr,elements)
console.log(arr,elements)
  • 找出数组中最大/最小的数
1
2
3
4
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后面。当绑定函数被调用时,这些参数会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们后面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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指向的函数即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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对象需要能调用原型上的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

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

  1. 解决function.bind()方法

    这个 bind 方法只有在 ie10 版本的浏览器才得到原生支持,低于该版本的浏览器下执行时会得到一个 undefined 的错误提示. 于是只好再次上网 google 解决方案,功夫不负有心人,我们 ...

  2. IE8支持function.bind()方法

    这个 bind 方法仅仅有在 ie10 版本号的浏览器才得到原生支持,低于该版本号的浏览器下运行时会得到一个 undefined 的错误提示.于是仅仅好再次上网 google 解决方式,功夫不负有心人 ...

  3. Function.bind 方法

    this.num = 9; var mymodule = { num: 81, getNum: function() { return this.num; } }; module.getNum(); ...

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

    Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...

  5. prototype.js中Function.prototype.bind方法浅解

    prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...

  6. JavaScript 中的 Function.prototype.bind() 方法

    转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...

  7. Javascript中this作用域以及bind方法的重写

    这是一个最近遇到的笔试题,出于尊重,不会说出该公司的名字,源于自身比较少,笔试题是将bind方法用ES3重写,使用bind这个方法,导致一时半会懵了,只记得bind可以改变this的作用域. 作为查漏 ...

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

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

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

    柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预 ...

随机推荐

  1. 在项目中ES6语法转ES5语法 babel转码器

    es6 babel 安装以及使用   1,安装好node(需要使用npm包管理工具) 2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json 3,本地安装 ...

  2. JNI的第1种写法 及 JNI通过形参修改Java数据

    声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 目的:通过形参在Java 和C之间传递数据,尤其是大块的媒体数据 优点:避免通过返回值返回一个巨大的数据块 ...

  3. win10系统开发环境安装studio 3T(MongoDB桌面客户端)

    studio 3T 是mongodb优秀的桌面客户端工具. 下载 https://studio3t.com/download/#windows 本教程基于2020.1.2版本 安装 F:\javawe ...

  4. Linux学习(二) --- 常用命令

    [TOC] 一.常用命令 1.目录 cd切换 cd 路径 切换到指定路径 cd .. 上一级 mkdir:创建目录 mkdir 目录名 pwd:查看 2.查看 ll命令:查询目录内容 ll 查看当前( ...

  5. JavaSE--Java 的基本程序设计结构

    Java 对大小写敏感 Java 中定义类名的规则很宽松.名字必须以字母开头,后面可以跟字母和数字的任意组合.长度基本上没有限制.但是不能使用 Java 保留字作为类名. 标准的命名规范为:类名是以大 ...

  6. 长沙中考2019数学T25讲解

    好久没更Blog了... 为了应付完成寒假作业,还是更一下(再不更都庚子年了) Upd:2020.1.22 题目 第一问 还是比较水友好的 给顶点就相当于多给了对称轴-\(\frac{b}{2a}\) ...

  7. Python笔记_第一篇_面向过程_第一部分_6.语句的嵌套

    学完条件控制语句和循环控制语句后,在这里就会把“语言”的精妙之处进行讲解,也就是语句的嵌套.我们在看别人代码的时候总会对一些算法拍案叫绝,里面包含精妙和精密的逻辑分析.语句的嵌套也就是在循环体内可以嵌 ...

  8. Windows Boot Manager、Bootmgfw.efi、Bootx64.efi、bcdboot.exe 文件的关系

    本教程针对于UEFI启动来叙述的,根据普遍的支持UEFI的机器来叙述. 标题简要说明:Windows Boot Manager  --------安装完Windows系统后而出现的启动选项(相关的信息 ...

  9. 吴裕雄--天生自然 JAVA开发学习:数据结构

    import java.util.Vector; import java.util.Enumeration; public class EnumerationTester { public stati ...

  10. GIL全局解释器锁-死锁与递归锁-信号量-event事件

    一.全局解释器锁GIL: 官方的解释:掌握概念为主 """ In CPython, the global interpreter lock, or GIL, is a m ...