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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
详解React路由传参方法汇总记录
Nov 29 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python 登录网站详解及实例
2017/04/11 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
给排水专业应届生求职信
2013/10/12 职场文书
材料物理专业个人求职信
2013/12/15 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
教师个人鉴定材料
2014/02/08 职场文书
聚美优品的广告词
2014/03/14 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
大学生求职信例文
2014/06/29 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书