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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
JS倒计时代码汇总
Nov 25 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
js实现日历与定时器
Feb 22 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
JavaScript中的相等操作符使用详解
Dec 21 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缓存的详解
2013/05/15 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
浅析PHP文件下载原理
2014/12/25 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
基于JavaScript 类的使用详解
2013/05/07 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python文件路径操作方法总结
2020/12/21 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
应聘自荐书
2013/10/08 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
认真学习保证书
2015/02/26 职场文书
工会经费申请报告
2015/05/15 职场文书