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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
vue中的数据绑定原理的实现
Jul 02 Javascript
Node.js log4js日志管理详解
Jul 31 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
详解vue v-model
2020/08/31 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python打印输出数组中全部元素
2018/03/13 Python
django主动抛出403异常的方法详解
2019/01/04 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
毕业大学生自荐信
2014/06/17 职场文书
实习证明格式范文
2014/10/14 职场文书
2014财务年终工作总结
2014/12/08 职场文书
档案管理员岗位职责
2015/02/12 职场文书
企业财务管理制度范本
2015/08/04 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
如何用python反转图片,视频
2021/04/24 Python
pytorch 如何使用float64训练
2021/05/24 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python