JS中改变this指向的方法(call和apply、bind)_javascript技巧

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();

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js_call_apply
, js改变this指向
改变this指向
bind call apply、apply call bind 区别、js call apply bind、apply call bind 参数、apply bind,以便于您获取更多的相关知识。

时间: 2024-10-02 22:15:22

JS中改变this指向的方法(call和apply、bind)_javascript技巧的相关文章

js中最容易被忽视的事件问题大总结_javascript技巧

什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性.主要处理DOM事件和IE事件的磨合,使其尽可能的相似. 下面我们来看一下DOM和IE之间的对象属性和方法做个对比(这里只指出两者之间不同的属性和方法),主要有以下五大点: DOM属性和方法 IE属性和方法 charcode keycode preventDefault returnValue=false re

JS实现探测网站链接的方法【测试可用】_javascript技巧

本文实例讲述了JS实现探测网站链接的方法.分享给大家供大家参考,具体如下: 如果想通过程序探测一个网站链接是否存在,可以通过服务器端高级语言编程实现,其实客户端的JavaScript也是可以探测的,下面通过一个技巧来探测网站链接. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

js获取客户端操作系统类型的方法【测试可用】_javascript技巧

本文实例讲述了js获取客户端操作系统类型的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

关于JS中match() 和 exec() 返回值和属性的测试_javascript技巧

语法: exec() : RegExpObject.exec(string) match() : stringObject.match(string) stringObject.match(regexp) 知识点: exec() 是RegExp对象的方法,而 match() 是String对象的方法. 都会返回包含第一个匹配项信息的数组:或者在没有匹配项的情况下返回null. 返回的数组虽然是Array 的实例,但包含两个额外的属性:index 和 input.其中,index 表示匹配项在字符

JS中mouseover和mouseout多次触发问题如何解决_javascript技巧

问题描述 我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2显示.问题如下: 1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示 2.当鼠标从id2上移动到id1上的时候, id2有显示变为不显示,然后变为显示 我希望的是当鼠标在id1或者id2上移动的时候,id2一直显示,不发生变化. <script type="text/javascript" src="https://code.jquery.com/jquer

JS中检测数据类型的几种方式及优缺点小结_javascript技巧

1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string"."boolean"."undefined"."object"."function" 局限性: 1)typeof null ->"object" 2)检测的不管是数组还是正则都返回的是"ob

JS中Iframe之间传值及子页面与父页面应用_javascript技巧

在js中,我们时常用到用iframe做系统框架,在子页面也,父页面之间的值传递是一个问题,下面是js获取父窗体和子窗体的对象js: 1.在iframe子页面中获取父页面的元素: a>window.parent.document这个是获取父页面document中的对象: b>如果要获取父页面js中的方法:window.parent.xxxx():xxxx()为方法: 2.在父页面中获取iframe子页面中的元素: a> 复制代码 代码如下: var child = document.get

js中的事件捕捉模型与冒泡模型实例分析_javascript技巧

本文实例讲述了js中的事件捕捉模型与冒泡模型.分享给大家供大家参考. 具体实现方法如下: 实例1: 复制代码 代码如下: <html> <head> <script type="text/javascript">  window.onload = function(){   document.getElementById('par').addEventListener('click',function() {alert('par');},true);

JS中自定义定时器让它在某一时刻执行_javascript技巧

有时,处于需求的原因,我们需要在JS中写一个方法,然后让它在某一时刻执行,即需要在JS中写一个定时器,当时间达到要求时间时,需要执行的方法自动执行,下面小编简单说一下我是怎么实现的 var tMinutes=0; var tHours=0; var go; function dingshi(hours,minutes){ tHours = hours; tMinutes = minutes; go=setInterval(run,3000); } function run(){ var date