动力节点首页 全国咨询热线:400-8080-105

绑定手机号,登录
手机号

验证码

微信登录
手机号登录
手机号

验证码

微信登录与注册
微信扫码登录与注册

扫码关注微信公众号完成登录与注册
手机号登录
首页 > 文章

实例探究JavaScript中的this指针用法

04-29 17:27 735浏览
举报 T字号
  • 大字
  • 中字
  • 小字

我们在刚开始学习JavaScript的时候,很容易被JavaScript中的this及其相关的方法,例如:bind,apply,call方法迷惑。JavaScript里的函数是一个高阶函数,编程语言里的高阶函数是可以作为对象传递的,同时javascript里的函数还有可以作为构造函数,这个构造函数可以创建实例化对象,结果导致方法执行时候this指针的指向会不断发生变化,很难控制。其实我们只要根据包含this指针的方法的用途加以区分,就能了解this指针所指向的对象。

1.直接函数调用

This指针指向全局环境,即Window对象。在全局环境中直接调用函数时,this对象会指向Window对象,例如:

var name='vicky'
function sayName(name){
    console.log(this.name);
}
sayName();   //this指向window对象,而因为在全局环境中定义了var name='vicky';所以this.name输出:vicky
window.sayName();  //sayName()效果等同于window.sayName()

2.对象函数调用

this指针指向调用函数的对象本身

var name='Bob';
function sayName(){
    console.log(this.name);
}
var object={'name':'vicky'};
object.sayName=sayName;          //sayName没有写成sayName(),表示不是执行函数,而是将sayName的指针赋值给object.sayName
object.sayName();               //由于对象函数调用方法,this指向对象本身,所以输出:'vicky'
sayName();                     //由于全局环境调用sayName()等同于window.sayName();输出:'Bob'

上面的例子已经很好的说明了在全局环境直接调函数调用和对象函数调用时this指针指向的区别。

3.构造函数调用

this指针指向新创建的对象

function object(name){
    this.name=name;
    console.log(this);      //由于this指向新创建的对象本身,输出:Object { name: "vikcy" }
    console.log(this.name);  //输出:"vicky"
}
var myObject=new Object('vicky');  //由于this指向新创建的对象本身

4.间接函数调用

例如call、apply方法,还有个特殊的bind方法

call(this指针要指向的对象,参数1,参数2,.....)

call方法可以动态的设置函数体内的this指向,例如:

function Cat(age,name){
    this.name='cat';
    console.log(this);
    console.log('cat: age:'+age+",name:"+name);
}
var cat=new Cat(4,'Bob');    //输出:Cat {name: "cat"}和cat: age:4,name:Bob
Cat.call(this,3,'Tom');     //由于调用了call方法,输出:this指向了Window和cat: age:3,name:Tom

先看var cat=new Cat(4,'Bob');这行代码,这里的this指向的是新建的Cat对象,输出的“cat: age:4,name:Bob”也是在对象初始化时候传入的。

Cat.call(this,3,'Tom');这行代码,这里的this指向的是Window对象,因为:我们在全局环境调用了Cat.call(this,3,'Tom');方法,这里call函数第一个参数(this指针要指向的对象)我们传入了this,而全局环境下的this指向的正好就是window对象,而第三和第四个参数,我们分别定义了age=>3,name=>'Tom'

javascript里call和apply操作符可以随意改变this指向,这看起来很灵活,但是某种程度上这种不合常理的做法破坏了我们理解this指针的本意,同时也让写代码时候很难理解this的真正指向。

想要了解this指向时,我们应该先弄清楚函数调用的方式,最后问自己这个this指向的对象是从何而来。只有弄清楚其本质,我们才能更好地在动力节点在线的JavaScript视频教程中学习this指针。

0人推荐
共同学习,写下你的评论
0条评论
杨晶珍
程序员杨晶珍

98篇文章贡献357785字

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

JavaWeb的3大组件

代码小兵49806-11 15:28

全面解析Cookie技术

代码小兵49806-11 15:51

浅谈JavaWeb架构演变

代码小兵49806-11 16:22

探讨Web开发中的Session存储与管理

代码小兵51603-29 17:28

JavaScript基础知识

 暴风城-小飞04-06 20:49

发评论

举报

0/150

取消