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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
jquery 学习笔记一
Apr 07 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP编写RESTful接口
2016/02/23 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python图算法实例分析
2016/08/13 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python实现趣味图片字符化
2019/04/30 Python
Django Celery异步任务队列的实现
2019/07/24 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
pandas按条件筛选数据的实现
2021/02/20 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
人事专员职责
2014/02/22 职场文书
大学生活动总结模板
2014/07/02 职场文书
道德模范事迹材料
2014/12/20 职场文书
销售员自我评价
2015/03/11 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
仙境之桥观后感
2015/06/16 职场文书