关于this的指向问题

概要

在javascript当中每一个function都是一个对象,this是javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用

 

this出现的场景分为四类

1、有对象就指向调用对象

2、没调用对象就指向全局对象:window是js中的全局对象

3、用new构造就指向新对象

4、通过apply或者call或bind来改变this的指向

 

 

1、函数有所有对象时:指向所属对象

举个栗子

var a={value:20};

a.show=function(){

console.log(this.value)

console.log(this)

}

show()这个函数所属对象是a,并由a调用.因此this指向对象是a

函数没有所属对象:指向全局对象

window.name=‘阿姨请您别把你闺女介绍给我‘;

function foo(){

console.log(this.name)

}

foo()

构造器中的this:指向新对象

 

var a=function(){

this.value=100;

}

var p1=new a();

console.log(p1.value);//100

这里面的this指向新对象

 

apply和call调用以及bind绑定:指向绑定对象

 

apply()方法接受两个参数第一个是函数运行的作用于,另一个是一个参数数组(arguments)

call()方法第一个参数的意思与apply方法相同,只是其他的参数需要一个个列举出来

简单来说:call的方式更接近我们平时调用函数,而apply需要我们传递Array形式的数组给它。

var a={value:100};

var show=function(){

console.log(this)

}

foo();//全局变了 global

foo.apply(a);//{value:100}

foo.call(a);//{value:100}

var aA=foo.bind(a);

aA();//{value}

 

 

 

 

 

关于this的指向

 

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向是那个调用它的对象

栗子一:

function a(){

var user=‘阿姨请不要把您闺女介绍给我‘;

console.log(this.user);//undefined

console.log(this);//window

}

按照我们上面说的this最终指向的是调用它的对象,这里的函数a实际是被window对象所点出来的,下面代码可以证明

function a(){

var user=‘阿姨请不要把您闺女介绍给我‘;

console.log(this.user);//undefined

console.log(this);//window

}

window.a();

栗子二:

var a={

user:‘阿姨请不要把您闺女介绍给我‘,

fn:function(){

console.log(this.user)

}

}

a.fn()

这里面的this指的是a,因为你调用这个fn是通过a.fn()执行的,那自然指向就是对象a,this的指向在函数创建的时候是觉定不了的,在调用的时候才能决定

栗子三:推翻上面的理论

var a={

user:‘阿姨请您不要把您闺女介绍给我‘

foo:function(){

console.log(this.user)

}

}

window.a.foo();//输出来是a这个对象里面的user。

为什么不是window呢?按照道理来说this会指向调用它的对象,window是js中的全局对象,而我们创建变量其实是给window添加属性,所以我们可以用window.a

我们在来看一个栗子

var a={

b:10,

foo:{

b:20,

show:function(){

console.log(this)

}

}

}

a.foo.show()

这里面输出的是foo这个对象,为什么会是foo?而不是a!那么下面我们来说一下this的几种情况

1、如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们不讨论严格模式

2、如果一个函数中有this,这个函数有被上一级对象调用,那么this指向的就是上一级的对象

3、如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。上面的例子可以证明

栗子四:继续探讨第三种情况

var a={

b:10,

foo:{

show:function(){

console.log(this.b)

}

}

}

a.foo.show()//undefined

尽管对象foo中没有a这个属性,这个this指向的也是对象foo,因此this只会指向它的上一级对象,不管这个对象中有没有this要的东西

栗子五:特殊情况

var a={

b:10,

foo:{

b:20,

show:function(){

console.log(this.b);

console.log(this)

}

}

}

var j=a.foo.show;

j()

//第一次输出是undefined

//第二次输出的是window

这里的this指向是window,为什么会这样?我们要清楚一句话this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,上面的案例中show被foo引用,但是在将show赋值给变了j的时候并没有执行,所以最终指向是window

时间: 2024-09-28 22:13:51

关于this的指向问题的相关文章

当this指针成为指向之类的基类指针时,也能形成多态

this指针: 1)对象中没有函数,只有成员变量 2)对象调用函数,通过this指针告诉函数是哪个对象自己谁. 1 #include<iostream> 2 using namespace std; 3 class Shape 4 { 5 public: 6 //void cal_display(Shape* this) 7 void cal_display(){ 8 display(); 9 this->display(); 10 } 11 private: 12 virtual vo

JavaScript中this指向

一.重点来了,this指向问题: 1.this指向之普通函数. 2.this指向之对象 3.this指向之构造函数 4.this指向之(call,apply)动态更改this指向. 二.具体分析如下 1.普通函数 // 第23行的调用者为null,this指向也为null,// 所以这时js把this指向了window对象,所以弹出的结果是// n,这样不好的是会污染全局函数内带this的操作,不能直接调用; 2.对象 // 第34行是对象的say方法指针指向了一个存在的函数say();// 所

Android gen根目录下自动生成的R文件指向问题

今天才弄明白,原来在调用vitamio包的时候使用它们的R文件,然后在迁入广告的时候出现了问题,但是瞎胡搞半天后把问题解决了,可没有明白这是什么原因. 今天更新应用又出现了相同的情况,无意中打开了gen的根目录妈蛋!发现里面的报名根本就不是我现在应用的包名.而是调用的那个工程的包名!这下终于找到根本原因了,但是怎么解决呢???----------->修改包名呗~~~~~~~可是你改了它又会自动生成了原来的那个,--------------后来终于发现原来这个R文件的包名适合manifest文件中

javascript中this的指向

作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. 但是随着函数使用场合的不同,this的值会发生变化.有一个原则不会变,那就是this指的是,调用函数的那个对象. demo1: 此时函数运行的结果是 1 ,x是全局变量,因为匿名函数demo()是被window调用的,原始写法是window.demo(),因为demo()是被window调用的,所

了解Js中的this指向

Js中的this对象是在运行时基于函数的执行环境绑定的,其中的this指向很不好理解,一不小心就用错了位置;. this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象. 对于this指向的理解,我分以下几种情况来说, this的指向: 1.在全局函数中,this等于window: var name="cyp"; console.log(this); 2.当函数被用作为某个对象的方法调用时,this等于哪个对

sitecore+score 在 Experience editor 添加新元素时associateed content 指向错误

Q:在sitecore的Experience editor页面添加component时,子元素的路径指向错误.如图: A: 首先你要整理思路,这个设置可能是在哪,是template还是control layout.当然这里肯定是跟页面control有关. 1.我们需要找到这个button的control layout.因为我们的项目是集成了score,所以根据score的手册我们知道这个button的路径在/sitecore/layout/Renderings/BootstrapUI/Conte

成员函数指针和指向静态成员函数的指针

#include <iostream> using namespace std; class Student{ public:     Student(const string& name):m_name(name){}     void who(void){         cout << m_name << endl;     }     string m_name;     static int s_add(int a,int b){         re

JavaScript 中的this指向问题

全局执行     首先,我们在全局环境中看看它的 this 是什么:     浏览器:     console.log(this);     // Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}     可以看到打印出了 window 对

JavaScript闭包中闭包函数this的指向

阅读文章前, 请先阅读阮一峰老师的这篇文章http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 前人写过的, 而且写得很好, 就没必要重复下去了. 只加一些阮老师的文章里没有说的.顺便总结一下. 引用一句话: "闭包就是functions that return function"(出处已经忘记啦) 闭包的类型: 循环闭包, 函数闭包 闭包的特点: 外部访问函数内部的值, 函数内部变量不被回收

彻底理解js中this的指向

<script> //this指向的是最终调用它的那个对象 //this指向的是window function aa(){ var str = 'jack'; console.log(this.str); //undefined console.log(this); //window } window.aa(); //this指向的是bb var bb = { str : 'jack', show : function(){ console.log(this.str); //jack } }