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资料prototype 属性
Mar 13 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
js实现前端分页页码管理
Jan 06 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
vue router demo详解
2017/10/13 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
python实现事件驱动
2018/11/21 Python
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
企划经理的岗位职责
2013/11/17 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
审计主管岗位职责
2014/01/31 职场文书
理发店策划方案
2014/06/05 职场文书
初中军训感言
2015/08/01 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
服务器nginx权限被拒绝解决案例
2022/09/23 Servers