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

前端js -- this指向总结。

          面向对象编程 --- this指向

一。首先:,

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

二。例如:

var obj = {
   a : 1,
   b : function() { 
       console.log(this.a) 
   }
}

obj.b()时,会输出1
var fun = obj.b; fun() 时,会输出undefined

三。原因:
1.obj.b()这里的this指向的是对象o,因为你调用这个fn是通过o.fn()执行的,那自然指向就是对象o
2.

var fun = obj.b;
fun();

相当于,

var b = function(){ 
   console.log(this.a)
};
obj = {
   a:1,
   b:b
};
var fun = obj.b;
fun();

虽然funobj.b的一个引用,但是实际上,他引用的是b函数本身,因此此时的fun()其实是一个不带任何修饰的函数调用,只是在将fn赋值给变量j的时候并没有执行所以最终指向的是window

四。总结: this的值要等到代码真正执行是才能确定。
同时,this的值有如下几种情况:
1.new调用时指的是被构造的对象。(

function Fn(){
   this.user = '猫咪'
}; 
var a = new Fn(); 
consle.log(a.user); //猫咪

这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向,将这个this指向对象a,为什么我说a是对象,因为用了new关键字就是创建一个对象实例,我们这里用变量a创建了一个Fn的实例[相当于复制了一份Fn到对象a里面],此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象a中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份。)
2.callapply调用,只想我们指定的对象(后续更新)。
3.对象调用,如执行obj.b()this指向obj
4.默认的,指向全局变量window

特殊:构造函数版this, 当this碰到return时。
  1. 举例:

(1).

function fn()  { 
     this.user = '金毛'; 
     return {};
 }; 
 var a = new fn;  
 console.log(a.user); //undefined

(2).

function fn()  {   
    this.user = '金毛';    
    return function(){};
}; 
var a = new fn;  
console.log(a.user); //undefined 

(3).

function fn()  {  
    this.user = '金毛';   
    return 1;
}; 
var a = new fn;  
console.log(a.user); //金毛

(4).

function fn()  {  
    this.user = '金毛';  
    return undefined;
}; 
var a = new fn;  
console.log(a.user); //金毛

2.总结:如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

3.特殊:虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。

function fn()  {  
    this.user = '金毛';  
    return null;
}; 
var a = new fn;   
console.log(a.user); //金毛

相关文章:

  • 理解Java集合(三)Map : HashMap/SortedMap/TreeMap
  • java io流
  • Heap Dump (heap=dump)
  • 配置Etcd集群和TLS认证
  • 学习最重要是方法,管理最重要是高度
  • git分支管理和工作流规范:不同场景细化和演示
  • JSON返回DateTime/Date('123123123')/解决办法
  • BZOJ 1926 [Sdoi2010]粟粟的书架
  • 创建以mybatis为基础的web项目(2)mabitis中的一对一关系项目实战
  • Confluence 6 使用 LDAP 授权连接一个内部目录 - 高级设置
  • 自动化测试之设置浏览器属性来模拟移动设备上的H5的测试
  • 区块链开发
  • office2016专业增强版
  • Ant风格的请求映射
  • 迁移phpstudy中的mysql至Linux
  • 【知识碎片】第三方登录弹窗效果
  • Android Volley源码解析
  • Android 控件背景颜色处理
  • Android开源项目规范总结
  • Angular 2 DI - IoC DI - 1
  • ECMAScript入门(七)--Module语法
  • JavaScript函数式编程(一)
  • JDK 6和JDK 7中的substring()方法
  • 分布式事物理论与实践
  • 关于字符编码你应该知道的事情
  • 简单数学运算程序(不定期更新)
  • 使用Envoy 作Sidecar Proxy的微服务模式-4.Prometheus的指标收集
  • 手机端车牌号码键盘的vue组件
  • 协程
  • 用Python写一份独特的元宵节祝福
  • Java性能优化之JVM GC(垃圾回收机制)
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • # 达梦数据库知识点
  • #Linux(权限管理)
  • #pragam once 和 #ifndef 预编译头
  • (第61天)多租户架构(CDB/PDB)
  • (二)PySpark3:SparkSQL编程
  • (附源码)基于ssm的模具配件账单管理系统 毕业设计 081848
  • (原創) 如何動態建立二維陣列(多維陣列)? (.NET) (C#)
  • *Django中的Ajax 纯js的书写样式1
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .php文件都打不开,打不开php文件怎么办
  • /deep/和 >>>以及 ::v-deep 三者的区别
  • ??在JSP中,java和JavaScript如何交互?
  • @基于大模型的旅游路线推荐方案
  • [14]内置对象
  • [8481302]博弈论 斯坦福game theory stanford week 1
  • [C++] Boost智能指针——boost::scoped_ptr(使用及原理分析)
  • [C++][数据结构][算法]单链式结构的深拷贝
  • [dts]Device Tree机制
  • [GN] Vue3.2 快速上手 ---- 核心语法2
  • [java面试]宇信易诚 广州分公司 java笔试题目回忆录
  • [mit6.s081] 笔记 Lab2:system calls