JS中改变this指向的方法(call和apply、bind)


Posted in Javascript onMarch 26, 2016

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式:

1.call用作继承时:

function Parent(age){
this.name=['mike','jack','smith'];
this.age=age;
}
function Child(age){
Parent.call(this,age);//把this指向Parent,同时还可以传递参数
}
var test=new Child(21);
console.log(test.age);//21
console.log(test.name);
test.name.push('bill');
console.log(test.name);//mike,jack,smith,bill

2.call和apply都可以改变this指向,不过apply的第二个参数是散列分布,call则可以是一个数组

console.log(Math.max.apply(null,[1,2,3,4]));//4

apply() 方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是 Array 的实例,也可以是arguments 对象。call() 方法与 apply() 方法的作用相同,它们的区别仅在于接收参数的方式不同。对于 call()
方法而言,第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。换句话说,在使用call() 方法时,传递给函数的参数必须逐个列举出来。

3.ES5还定义了一个方法:bind(),它会创建一个函数的实例,其this值会被绑定到传给bind()函数的值。如

window.color='red';
var o={color:'blue'};

function sayColor(){
console.log(this.color);
}
var objectSaycolor=sayColor.bind(o);
//var objectSaycolor=sayColor.bind();
objectSaycolor();//blue

在这里sayColor()调用bind()并传入对象o,创建了objectSayColor()函数。objectSayColor()函数的this值等于o,因此即使是在全局作用域中调用这个函数,也会看到blue。

以上所述是小编给大家介绍的JS中改变this指向的方法(call和apply、bind),希望对大家以上帮助!

下面还有点时间给大家补充点基础知识有关:call()与apply()区别

一、方法的定义

call方法:

语法:call(thisObj,Object)

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:apply(thisObj,[argArray])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

代码示例:

function Animal(name) {
   this.name = name;
   this.showName = function() {
     console.log(this.name);
   };
 }
 function Cat(name) {
   Animal.call(this, name);
 }
 Cat.prototype = new Animal();
 function Dog(name) {
   Animal.apply(this, name);
 }
 Dog.prototype = new Animal();
 var cat = new Cat("Black Cat"); //call必须是object
 var dog = new Dog(["Black Dog"]); //apply必须是array
 cat.showName();
 dog.showName();
 console.log(cat instanceof Animal);
 console.log(dog instanceof Animal);

模拟call, apply的this替换

function Animal(name) {
   this.name = name;
   this.showName = function() {
     alert(this.name);
   };
 };
 function Cat(name) {
   this.superClass = Animal;
   this.superClass(name);
   delete superClass;
 }
 var cat = new Cat("Black Cat");
 cat.showName();
Javascript 相关文章推荐
Js基础学习资料
Nov 23 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
Vue动态组件实例解析
Aug 20 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
浏览器复制插件zeroclipboard使用指南
Mar 26 #Javascript
jquery中validate与form插件提交的方式小结
Mar 26 #Javascript
javascript实现方法调用与方法触发小结
Mar 26 #Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 #Javascript
jQuery常用的一些技巧汇总
Mar 26 #Javascript
javascript拖拽应用实例(二)
Mar 25 #Javascript
几种经典排序算法的JS实现方法
Mar 25 #Javascript
You might like
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
简单了解微信小程序的目录结构
2019/07/01 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
Python中join和split用法实例
2015/04/14 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python 专题四 文件基础知识
2017/03/20 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
党员干部一句话承诺
2014/05/30 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书