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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
犀利的js 函数集合
Jun 11 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
JS常用表单验证方法总结
May 22 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
实例讲解JavaScript 计时事件
Jul 04 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安装全攻略:APACHE
2006/10/09 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP编写简单的App接口
2016/08/28 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
vue实现轮播图帧率播放
2021/01/26 Vue.js
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
Python获取当前路径实现代码
2017/05/08 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
创建Django项目图文实例详解
2019/06/06 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
给客户的道歉信
2014/01/13 职场文书
经典安踏广告词
2014/03/21 职场文书
员工薪酬激励方案
2014/06/13 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书