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中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
类之Prototype.js学习
Jun 13 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
js prototype截取字符串函数
Apr 01 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
JavaScript实现模态对话框实例
Jan 13 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
浏览器复制插件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
相对路径转化成绝对路径
2007/04/10 PHP
php连接mysql数据库代码
2009/03/10 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python多线程编程简单介绍
2015/04/13 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python自定义时钟类、定时任务类
2021/02/22 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python实现在线翻译功能
2020/03/03 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
政治思想表现评语
2014/05/04 职场文书
课程设计的心得体会
2014/09/03 职场文书
党的作风建设心得体会
2014/10/22 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
亮剑观后感600字
2015/06/05 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python