JS 中的this指向问题和call、apply、bind的区别
this的指向问题
- 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window。
function a(){
console.log(this); //输出函数a中的this对象
}
function b(){};
var c={name:"call"}; //定义对象c
var c = {
getFunc:function(){
return function(){
console.log(this)
}
}
}
var cFun = c.getFunc();
cFun()//Window 这是因为在全局环境下执行的函数
- 在call和apply函数中this指向的是指定的对象,如果指定的对象为undefined或者null,那this对象指向window,如果指定的对象为空this也是指向的window,如果指向的对象是字符串,那this指向的就是String
var d = {
getThis:function(){
console.log(this)
}
}
var e = {
name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e); //这句话就相当于说把对象d中的上下文环境换成了对象e
d.getThis.call(66); //Number
d.getThis.call('wan'); //String
d.getThis.call(); //Window
d.getThis.call(true); //Boolean
- 如果在箭头函数中,this对象等同于外层代码中的this
var f = {
getThis: ()=>{
console.log(this)
},
getThis2: function(){
console.log(this);
}
}
f.getThis(); //Window
f.getThis2(); //f
call、apply、bind的区别
- call的基本用法
- 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
- 定义:调用一个对象的一个方法,以另一个对象替换当前对象。
- call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
- thisObj的取值有以下4种情况:
- 不传,或者传null,undefined, 函数中的this指向window对象
- 传递另一个函数的函数名,函数中的this指向这个函数的引用
- 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean
- 传递一个对象,函数中的this指向这个对象
function a(){
console.log(this); //输出函数a中的this对象
}
function b(){}
var c={name:"call"}; //定义对象c
a.call(); //window
a.call(null); //window
a.call(undefined); //window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b); //function b(){}
a.call(c); //Object
- apply的基本用法
- 语法:**apply([thisObj[,argArray]]) **
- 定义:应用某一对象的一个方法,用另一个对象替换当前对象。
- 如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
function class1(args1,args2){
this.name=function(){
console.log(args,args);
}
}
function class2(){
var args1="1";
var args2="2";
class1.call(this,args1,args2);
/*或*/
class1.apply(this,[args1,args2]);
}
var c=new class2();
c.name(); //1,2
- bind的基本用法
- bind是在EcmaScript5中扩展的方法(IE6,7,8不支持)
- bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。
- bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数
var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3
- call、apply、bind三者的区别
- 三者都是来改变函数的this对象的指向的
- 三者的第一个参数都是this要指向的对象,也就是要指定的上下文
- 三者都可以利用后续参数传参
- bind是返回对应函数,便于稍后调用,call、apply是立即调用
- call和apply作用是完全一样的,只是接收参数的方式不一样,call需要把参数按顺序传递进去,而apply则是把参数放在数组里。
var obj = {
x: 81,
};
var foo = {
getX: function() {
return this.x;
}
}
console.log(foo.getX.bind(obj)()); //81
console.log(foo.getX.call(obj)); //81
console.log(foo.getX.apply(obj)); //81
三个输出的都是81,但是注意看使用 bind() 方法的,他后面多了对括号。
参考文章:https://www.cnblogs.com/libin-1/p/6069031.html
JS 中的this指向问题和call、apply、bind的区别的更多相关文章
- js中改变this指向的call、apply、bind 方法使用
前言: 由于js 中this的指向受函数运行环境的影响,指向经常改变,使得开发变得困难和模糊,所以在封装sdk,写一些复杂函数的时候经常会用到this 指向绑定,以避免出现不必要的问题,call.ap ...
- 理解js中this的指向
学习自原文 http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)! 关于js中this的指向,在函数定义的时候还无法 ...
- js中this的指向
在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1. ...
- JS中的this 指向问题
我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...
- 轻松了解JS中this的指向
JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向 ...
- js中 this 的指向
js中 this的指向一共存在3种地方: 1.全局的this; 2.构造函数的this; 3.call/apply; 一.全局的this: function test(){ this.d = 3;// ...
- js中的new操作符与Object.create()的作用与区别
js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...
- 彻底理解js中this的指向,不必硬背。
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
- 了解学习JS中this的指向
[转] 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问 ...
- JS中this的指向问题
JS中this的定义:this对象是在运行时基于函数的执行环境绑定的(通俗点来说就是:this代表当前函数属于哪个对象). this一般情况下都代表的是global对象,在浏览器中就是window对象 ...
随机推荐
- Global exception handling in asp.net core webapi
在.NET Core中MVC和WebAPI已经组合在一起,都继承了Controller,但是在处理错误时,就很不一样,MVC返回错误页面给浏览器,WebAPI返回Json或XML,而不是HTML.Us ...
- js 的数学处理方法
1.javascript取整方法floor.round.ceil floor向下取整: Math.floor(0.20); Math.floor(0.90); Math.floor(-0.90); / ...
- react 开发知识准备
react react使用教程 babel babel 可用于ES6转换为ES5,jsx转换为原生js. ES6 ES6 语法 webpack webpack打包工具,它把不同的.相互依赖的静态资源都 ...
- Java实现网页抓取的一个Demo
这个小案例的话我是存放在我的github 上. 下面给出链接自己可以去看下,也可以直接下载源码.有具体的说明 <Java网页抓取>
- 从Unity中的Attribute到AOP(八)
本文将讲一下在UnityEditor命名空间下的一些特性. CallBackOrder,这个Attribute是所有带callback index的Attribute的基类,由于官方也没有给出详细的说 ...
- TLD算法原理--学习理解之(二)
正如名字所示,TLD算法主要由三个模块构成:追踪器(tracker),检测器(detector)和机器学习(learning). 对于视频追踪来说,常用的方法有两种,一是使用追踪器根据物体在上一帧的位 ...
- 在visual studio的工程项目应用中打开console控制窗口
在visual studio的工程项目应用中打开console控制窗口,这个可以方便我们在console中输出参数的值检查错误. 只需要在需要打开console的地方加入下面的代码即可. AllocC ...
- Gym 100952H&&2015 HIAST Collegiate Programming Contest H. Special Palindrome【dp预处理+矩阵快速幂/打表解法】
H. Special Palindrome time limit per test:1 second memory limit per test:64 megabytes input:standard ...
- 最短路 spfa 算法 && 链式前向星存图
推荐博客 https://i.cnblogs.com/EditPosts.aspx?opt=1 http://blog.csdn.net/mcdonnell_douglas/article/deta ...
- A. Vasya and Football
A. Vasya and Football time limit per test 2 seconds memory limit per test 256 megabytes input standa ...