JavaScript之call,bind,apply方法及 this 的用法辨析
栏目: JavaScript · 发布时间: 5年前
内容简介:JavaScript函数中的三个方法例如:
概述
JavaScript函数中的三个方法 .call()
, .apply()
, .bind()
,总体来说主要功能就是改变函数中 this
关键字的指向,因为 this
默认指向 当前环境的对象
;
例如:
var obj = { name: 'Knight', getName: function() { // this 指向 obj 对象 console.log(this.name); } } obj.getName(); // 'Knight'
call()
.call()
可以用于改变 this
值的指向,例如:
this.name = 'Knight'; // 此处 this 指向全局对象 window; var obj = { name: 'Cloud' } function fn() { console.log(this.name); } fn(); // 'Knight' fn.call(obj); // 'Cloud' // 此处指向了 obj 对象,所以 name 变了
也可以传递函数参数,平常调用函数的形式可能是这样:
function fn(a, b) { console.log(a + b); } fn(2 + 3); // 5
现在也可以这样调用:
function fn(a, b) { console.log(a + n); } fn.call(null, 2, 3); // 5 // 因为函数里没有用到 this, // 所以可以设置为 null
apply()
.apply()
与 .call()
类似,第一个参数也是用于改变 this
指向,区别就是 apply()
接受的函数参数是一个 数组
,例如:
function fn(a, b) { console.log('Mu name is ' + this.name + (a + b) + ' years old.'); } var obj = { name: 'Knight' } var arr = [2, 3]; fn.apply(obj, arr); // My name is Knight, 5 years old. // 使用 call() 的情况: fn.call(obj, 2, 3); // My name is Knight, 5 years old.
bind()
.bind()
也与 .call()
类似,改变 this 指向,传递函数参数,区别在于 .bind()
方法结果是创建一个新的 绑定函数
,而之前的 .call()
和 .apply()
结果都是 立即执行函数
,举例来理解:
var obj = { name: 'Knight' } function fn(a, b) { console.log('My name is ' + this.name + (a + b) + ' years old.'); } var fnn = fn.bind(obj, 2, 3); // fn.bind() 是一个函数,不会立即执行 fnn(); // My name is Knight, 5 years old. fn.bind(obj, 2, 3)(); // 这种写法就是立即执行函数了, // 结果与上面一样;
this 的困境
考虑以下情况:
function fn1() { function fn2() { console.log('fn2: ' + this); } fn2(); console.log('fn1: ' + this); } fn1.call('here'); // 'fn1: here'
结果不会输出 fn2: here
,因为函数定义 fn2
里的 this
是一个新的指向,并且未定义,与外部函数 fn1
中的 this
不同;
所以我们通常会进行一下处理:
function fn1() { function fn2() { console.log('fn2: ' + this); } // 对 this 进行转存 var that = this; fn2.call(that); console.log('fn1: ' + this); } fn1.call('here'); /* fn2: here fn1: here */
当然,ES6中的 箭头函数 解决了上述问题:
function fn1() { var fn2 = () => { console.log('fn2: ' + this); } fn2(); fn2.call('there'); console.log('fn1: ' + this); } fn1.call('here'); /* fn2: here fn2: here fn1: here */
由于 .call()
方法对箭头函数不起作用,所以上面的第二行输出与第一行相同;
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 关于单元测试,我们需要知道什么?- 术语辨析篇
- 大数据分析&人工智能:技术内容价值观的辨析
- 辨析 BI、数据仓库、数据湖和数据中台内涵及差异点
- AWK 的用法
- AWK基础用法
- UniversalImageLoader的用法总结
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
高性能HTML5
Jay Bryant、Mike Jones / 奇舞团 / 电子工业出版社 / 2014-5
《高性能html5》为读者讲解了如何用html5 从一开始就设计一个高性能的网站,以及如何对已有网站进行改良,使得它们具备优越的性能。《高性能html5》中总结了许多实践经验、关键技巧,并提供了丰富的示例,作者有意无意地将软件工程以及前端开发技术之道隐藏于朴实的描述中。 通过学习《高性能html5》,读者能够掌握如何创建自己的高性能网站。《高性能html5》适合于想创建自己网站的初学者,同样......一起来看看 《高性能HTML5》 这本书的介绍吧!