动力节点旗下在线教育品牌  |  咨询热线:400-8080-105 学Java全栈,上蛙课网
首页 > 文章

实例探究JavaScript中this指针用法

08-11 17:26 174浏览
举报 T字号
  • 大字
  • 中字
  • 小字

学过Java的人都知道,在Java里面是没有指针这一概念的。this指针在java语言里只能在实例化对象里使用,this指针等于这个被实例化好的对象。其实JavaScript里的this指针逻辑上的概念也是实例化对象,这一点和java语言里的this指针是一致的,但是javascript里的this指针却比java里的this难以理解的多,我们就来探究一下JavaScript中this指针用法

我们在刚开始学习JavaScript的时候,很容易js中的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的真正指向

了解javaScriptthis指向时,我们应该先弄清楚函数调用的方式,最后问自己这个this指向的对象是从何而来。只有弄清楚其本质,我们才能更好地在JavaScript中使用this指针。

0人推荐
共同学习,写下你的评论
0条评论
爱读书的姑娘
程序员爱读书的姑娘

12篇文章贡献56281字

作者相关文章更多>

推荐相关文章更多>

DOM渲染的详细过程

QCode09-04 14:38

CSS水平和垂直居中技巧大梳理

Code大师09-04 14:50

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

不写代码你养我啊08-23 11:14

推荐的-视.频播放器以及在线客服

不写代码你养我啊09-17 18:02

谈谈java多线程的三大特性

要学习了06-18 18:13

发评论

举报

0/150

取消