当前位置: 首页 > news >正文

this指向

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

1.demo1
``

function a(){
var user="shark Jan";
console.log(this.user);
console.log(this);
}
a();

 


``
##window是js中的全局对象,在以上例子中,函数a是被window调用的,所以this指向了window.
由于window没有user这个变量,所以this.user打印的结果是undefined;
但是由于this指向了window,所以this的打印结果是window.

2.demo2
``

var o={
user:"shark Jan",
fn:function(){
console.log(this.user); //shark Jan
}
}
o.fn();

 


``
这个例子中,由于fn函数是被o对象调用的,所以fn中的this指向了o对象。所以打印结果是"shark Jan";

3.
demo3
``

var o={
user:"shark Jan",
fn:function(){ 
console.log(this.user); //undefined
}
}
window.o.fn();

 


``
##看了上面的例子,按照上面的理论,我们很容易会想到打印undefined;因为window作为全局对象调用了fn,this应该指向window,但是window中并没有user这个属性,所以会返回undefined.
但是这里并非如此,打印结果是"shark Jan"
为了搞清楚这个问题我们再看一个实例
demo4
``

var o={
a:10,
b: {
a: 12,
fn: function () {
console.log(this.a); //12
}
}
};
o.b.fn();

 


``
这个例子中fn同样是o调用的,但是this并没有指向o,它打印的结果是12.
这是为什么呢?
##a.如果一个函数中有this,但是它没有被上一级对象调用,那么this指向的就是window(这里暂时不探讨严格版js)。
##b.如果一个函数中有this,同时又被上一级对象调用,那么this指向的是上一级对象。
##如果一个函数中有this,同时又包括多个对象,那么尽管函数是被最外层对象调用,this仍然会指向上一层调用它的对象。
这里插一点,对象不能隔代调用。比如
demo5
``

``
在这里由于o与c之间间隔一个对象b,所以无法打印this指向。

4.还有一种情况比较特殊,例如
demo6
``

var o={
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j=o.b.fn;
j();
j();

 


``
看了上面的实例,你想出的结果可能是12,12,因为这里this应该指向的是上一级对象b呀。
但是事实并非如此,你还没有理解一句话,this永远指向的是最后调用它的对象,也就是在函数执行时,是谁调用的?
这里var j=o.b.fn,实际上只是定义了j变量,并没有执行j,所以this指向无法判断,但是后面的j(),执行了j变量,也就调用了fn(),但是这里执行j()的其实是window,所以this实际上指向了window.
window中并没有a属性,所以this.a指向了undefined,this指向window.

二、构造函数中的this指向
demo
``

function Fn(){
this.user="shark Jan"
}
var a= new Fn();
console.log(a.user); //shark Jan

 


``
上面实例中a可以点出Fn里的user,是因为new关键字可以改变this指向。
这里的new创造了一个构造函数,构造函数的作用就是初始化对象,又使用变量a创建了一个Fn的实例,就相当于复制了一份Fn到对象里,这里的this就指向里新创建出来的a.

三、当this碰到return时,
``

demo1
function fn(){
this.user="shark Jan";
return function(){};
}
var a= new fn;
console.log(a.user); //undefined

demo2
function fn(){
this.user="shark Jan";
return {};
}
var a= new fn;
console.log(a.user); //undefined

demo3
function fn(){
this.user="shark Jan";
return 1;
}
var a= new fn;
console.log(a.user); //"shark Jan"

 


``

##通过以上实例可以发现,当返回值是一个对象时,this指向的就是那个返回值的对象,但是当返回值不是一个对象时,那么this仍然指向函数的实例。

##补充说明:
1.在事件中,this指向触发事件的对象,但是比较特殊的是,在IE中attachEvent中的this总是指向全局对象window。

2.严格版javascript中,默认的this不再指向window,而是指向undefined.

3.new操作符的作用
demo
``

function fn(){
this.num=1;
}
var a= new fn();
console.log(a.num); //1

 

总结:

1.this永远指向函数运行时所在的对象,而不是函数创建时所在的对象,不再任何对象内的this或者匿名函数的this,指向window.

2.如果是call,apply,with,它们指定的this是谁,就是谁。

3.普通函数调用中的this,函数被谁调用指的就是谁。

 

 

 



这里this为什么会指向a,因为new关键字会创建一个空对象,然后回自动调用一个apply方法,将this指向这个空对象a,这样的话,函数内部的this就会被这个空对象a代替。







转载于:https://www.cnblogs.com/sharkJan/p/7442581.html

相关文章:

  • ASCII码表
  • 扫雷游戏制作过程(C#描述):第三节、雷区绘制
  • 使用SQL中的ROW_NUMBER()和while循环对每一行执行操作
  • 关于FPGA随笔
  • 取得所有DB的名称, 形成一行, 并以逗号分隔
  • windows下安装JDK1.8和eclipse
  • LightOJ 1414 February 29(闰年统计+容斥原理)
  • C++ 日志类库 log4cplus
  • Spark Mllib里如何将trainDara训练数据的分类特征字段转换为数值字段(图文详解)...
  • 给Eclipse安装eUML2插件以及可能出现的依赖错误解决方案
  • junit import org.junit.Test 报错
  • SQL Server2005与SQLServer2008并存时, 怎样连接到2008
  • 微信小程序开发之带搜索记录的搜索框
  • 怎样启用sa用户登录
  • (接口自动化)Python3操作MySQL数据库
  • [LeetCode] Wiggle Sort
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • Android Studio:GIT提交项目到远程仓库
  • IIS 10 PHP CGI 设置 PHP_INI_SCAN_DIR
  • JAVA_NIO系列——Channel和Buffer详解
  • Java到底能干嘛?
  • Java反射-动态类加载和重新加载
  • JS正则表达式精简教程(JavaScript RegExp 对象)
  • Redis 懒删除(lazy free)简史
  • 爱情 北京女病人
  • 从输入URL到页面加载发生了什么
  • 二维平面内的碰撞检测【一】
  • 聚类分析——Kmeans
  • 利用阿里云 OSS 搭建私有 Docker 仓库
  • 聊一聊前端的监控
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 前端路由实现-history
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 原生js练习题---第五课
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • 阿里云服务器购买完整流程
  • 移动端高清、多屏适配方案
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • #define
  • $().each和$.each的区别
  • $(function(){})与(function($){....})(jQuery)的区别
  • (07)Hive——窗口函数详解
  • (echarts)echarts使用时重新加载数据之前的数据存留在图上的问题
  • (二)PySpark3:SparkSQL编程
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • (提供数据集下载)基于大语言模型LangChain与ChatGLM3-6B本地知识库调优:数据集优化、参数调整、Prompt提示词优化实战
  • (转)甲方乙方——赵民谈找工作
  • (状压dp)uva 10817 Headmaster's Headache
  • ***监测系统的构建(chkrootkit )
  • .mysql secret在哪_MYSQL基本操作(上)
  • .net core 调用c dll_用C++生成一个简单的DLL文件VS2008
  • .NET Core 通过 Ef Core 操作 Mysql
  • .net 使用$.ajax实现从前台调用后台方法(包含静态方法和非静态方法调用)
  • .Net接口调试与案例
  • .NET使用存储过程实现对数据库的增删改查