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 相关文章推荐
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 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
咖啡与水的关系
2021/03/03 冲泡冲煮
PHP函数in_array()使用详解
2014/08/20 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
vue实现文件上传功能
2018/08/13 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python中requests小技巧
2017/05/10 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python语言中有算法吗
2020/06/16 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
JSF界面控制层技术
2013/06/17 面试题
求职面试个人自我评价
2014/02/28 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
小学思想品德教学反思
2016/02/24 职场文书
golang中的并发和并行
2021/05/08 Golang
Python合并pdf文件的工具
2021/07/01 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python