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分页函数代码
Sep 10 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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
第十二节--类的自动加载
2006/11/16 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Django数据库操作的实例(增删改查)
2017/09/04 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Django URL参数Template反向解析
2020/11/24 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
四个太阳教学反思
2014/02/01 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
推荐信模板
2014/05/09 职场文书
节约能源标语
2014/06/17 职场文书
个人授权委托书模板
2014/09/14 职场文书
综治维稳工作汇报
2014/10/27 职场文书
护理实习生带教计划
2015/01/16 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
把77A收信机改造成收音机
2022/04/05 无线电