JavaScript中的this/call/apply/bind的使用及区别
作者:刘亦枫 发布时间:2023-09-15 06:23:19
一、this
1.什么是this
this 关键字在大部分语言中都是一个重要的存在,JS中自然不例外,其表达的意义丰富多样甚至有些复杂,深刻理解this是学习JS、面向对象编程非常重要的一环。
2.this 代表什么
this代表函数(方法)执行的上下文环境(上下文,类似与你要了解一篇文章,了解文章的上下文你才能清晰的了解各种关系)。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
1.在方法中,this 表示该方法所属的对象。
2.如果单独使用,this 表示全局对象。
3.在函数中,this 表示全局对象。
4.在函数中,在严格模式下,this 是未定义的(undefined)。
5.在事件中,this 表示接收事件的元素。
6.类似 call() 和 apply() 方法可以将 this 引用到任何对象。
3.绑定 this 的方法
this的动态切换,固然为 JavaScript 创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this固定下来,避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法,来切换/固定this的指向。
4.this的指向
1.在一般函数方法中使用 this 指代全局对象
function test(){
this.x = 1; //这里this就是window
console.log(this.x);
}
test(); // 1
JS规定,函数中的this,在函数被调用时确定,它指函数当前运行的环境。
2.作为对象方法调用,this 指代上级对象
var x =3;
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m(); // 1
如果函数作为对象的方法时,方法中的 this 指向该对象。
3.作为构造函数调用,this 指代new 出的对象
function test(){
console.log(this);
}
var o = new test();
test();
//可以看出o代表的不是全局对象
new关键词的作用是调用某个函数并拿到其中的返回值,只是调用过程稍特殊。在上面的代码实例中。test函数被new关键词调用时,内部依次执行了以下步骤:
(1)创建一个空对象。
(2)将这个空对象的原型,指向这个构造函数的prototype。
(3)将空对象的值赋给函数内部的this(this就是个空对象了)。
(4)执行函数体代码,为this这个对象绑定键值对。
(5)返回this,将其作为new关键词调用oop函数的返回值。
所以构造函数中的this,依旧是在构造函数被new关键词调用时确定其指向,指向的是当前被实例化的那个对象。
4.箭头函数中的this
箭头函数是ES6的新特性,最重要的特点是它会捕获其所在上下文的this作为自己的this,或者说,箭头函数本身并没有this,它会沿用外部环境的this。也就是说,箭头函数内部与其外部的this是保持一致的。
this.a=20
var test={
a:40,
init:()=>{
console.log(this.a)
function go(){
this.a=60
console.log(this.a)
}
go.prototype.a=50
return go
}
}
var p=test.init()
p()
new (test.init())()
//输出 20 60 60 60
5.改变指向
this的动态切换,固然为 JavaScript 创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this固定下来,避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法,来切换/固定this的指向。
bind方法和apply、call稍有不同,bind方法返回一个新函数,以后调用了才会执行,但apply、call会立即执行。
二、Function.prototype.bind()
bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值,例如:f.bind(obj),实际上可以理解为obj.f(),这时f函数体内的this自然指向的是obj;
示例:
function f(y, z){
return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6
这里bind方法会把它的第一个实参绑定给f函数体内的this,所以这里的this即指向{x : 1}对象,从第二个参数起,会依次传递给原始函数,这里的第二个参数2,即是f函数的y参数,最后调用m(3)的时候,这里的3便是最后一个参数z了,所以执行结果为1 + 2 + 3 = 6分步处理参数的过程其实是一个典型的函数柯里化的过程(Curry)。
三、call/apply
1.定义
每个函数都包含两个非继承而来的方法:call()方法和apply()方法。
call和apply可以用来重新定义函数的执行环境,也就是this的指向;call和apply都是为了改变某个函数运行时的context,即上下文而存在的,换句话说,就是为了改变函数体内部this的指向。
2.语法
call()
调用一个对象的方法,用另一个对象替换当前对象,可以继承另外一个对象的属性,它的语法是:
Function.call(obj[, param1[, param2[, [,...paramN]]]]);
obj:这个对象将代替Function类里this对象
params:一串参数列表
说明:call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为obj指定的新对象,如果没有提供obj参数,那么Global对象被用于obj。
apply()
和call()方法一样,只是参数列表不同,语法:
Function.apply(obj[, argArray]);
obj:这个对象将代替Function类里this对象
argArray:这个是数组,它将作为参数传给Function
说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArray和obj任何一个参数,那么Global对象将用作obj。
3.异同
相同点
call()和apply()方法的相同点就是这两个方法的作用是一样的。都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。
一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向,看个例子:
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
console.log(add.call(sub, 2, 1));//3
为什么add.call(sub, 2, 1)的执行结果是3呢,因为call()方法改变了this的指向,使得sub可以调用add的方法,也就是用sub去执行add中的内容,再来看一个例子:
function People(name, age) {
this.name = name;
this.age = age;
}
function Student(name, age, grade) {
People.call(this, name, age);
this.grade = grade;
}
var student = new Student('小明', 21, '大三');
console.log(student.name + student.age + student.grade);//小明21大三
在这个例子中,我们并没有给Student的name和age赋值,但是存在这两个属性的值,这还是要归功于call()方法,它可以改变this的指向。
在这个例子里,People.call(this, name, age);中的this代表的是Student,这也就是之前说的,使得Student可以调用People中的方法,因为People中有this.name = name;等语句,这样就将name和age属性创建到了Student中。
总结一句话就是call()可以让括号里的对象来继承括号外函数的属性。
至于apply()方法作用也和call()方法一样,可以这么写:
People.apply(this, [name, age]);
或者这么写:
People.apply(this, arguments);
在这里arguments和[name, age]是等价的。
不同点
从定义中也可以看出来,call()和apply()的不同点就是接收参数的方式不同。
1.apply()方法接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
2.call()方法不一定接受两个参数,第一个参数也是函数运行的作用域(this),但是传递给函数的参数必须列举出来。
在给对象参数的情况下,如果参数的形式是数组的时候,比如之前apply()方法示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的)就可以采用apply()方法。
但是如果Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call()方法来实现了,也就是直接指定参数列表对应值的位置Person.call(this,age,name)。
来源:https://blog.csdn.net/liuyifeng0000/article/details/104563241
猜你喜欢
- 最近,在搞这个东西,网上也找不到asp相关的,如果有人很早弄出来了,也不要笑话偶;费了好久,总算搞定;原理:用stream对象预读文件的头两
- 来到杭州,迅速租了房子,扫了日常用品。再非专业地提前体验一下与工作有那么一点点点点点相关的UED(用户体验设计)。良好的用户体验是一种非必须
- 在某些情况下,比如自动补全(auto complete)的输入框中,需要使用keyup事件来监听键盘的输入以迅速作出回应。关键在于keyup
- 1、可以控制左横向滚动还是右横向滚动。2、鼠标悬停上时暂停滚动,移开后恢复滚动。3、间歇时间按需调整,但不要低于容器向左/右移动的时间。JA
- 要是XHTML与CSS能面向对象。。太阳应该从北边升起了。但是,凡事都应该带着OO的思想来看问题,也勉强可以凑数拉。其实,早在零几年就有人提
- 第一种,也是我最常用的,第一帧里加上这个比较灵活,想要自定义加入菜单,只要定义drMenu这个对象就可以了var drMenu&n
- 同伪类的方式类似,伪元素通过对插人到文档中的虚构元素进行触发,从而达到某种效果。在CSS1里,有两个伪元素,即:first-letter和f
- Module Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布
- 添加字段的语法:alter table tablename add (column datatype [default value][nul
- PHP asXML()函数实例格式化 XML(版本 1.0)中的 SimpleXML 对象的数据:<?php $note=<&l
- 这是来自于Steven D编写的WEB前端开发设计要点的内容。虽然许多设计师已非常熟练的使用了Web标准,让人遗憾的是有很多细节的排版处理仍
- 排查原因,发现是80端口被其它程序占用(很常见的事情╮(╯_╰)╭)。解决方法用记事本打开目录x:\xampp\apache\conf下的h
- 在Flash播放器运行时,将不同来源的资源划分到独立的沙箱(sandbox)内,不同沙箱之间不能彼此操作数据(除非目标沙箱做过一些设置,授权
- 问题,在一个程序内构建好了一个图,运行完之后想重新使用这个图进行计算,或者想同时在train完的时候做test,就会提示***变量已存在。解
- 数组使用简介原文地址:30 Days of Mootools 1.2 Tutorials - Day 3 - Intro to Using
- 有一个查询如下: 代码如下:SELECT c.CustomerId, CompanyName FROM Customers c
- 今天在这里,不以设计师的身份,而从一个普通用户的角度和各位聊聊设计中蕴含的那份情感,关于情感再产品设计中的意义,聊聊设计中的那份源于“心”的
- 新上的一台服务器出现了一个现象:ASP程序中,调用函数Now(),显示的时间总是形如“2009-07-12 上午 08:12:56”这样的,
- 这是一个给新手学习代码的帖子,包含以下内容:如何使用UBB代码,如何用js与剪贴板交互,如何使用textRange对象,如何使用自定义的快捷
- (asp.net的应用). 在网上一搜有很多此类文章,但我需要将公司的复杂的,较大的web应用也以此方式操作,比较的头大。一般的文章建议将b