白话js this指向问题
前言
通过本文,你大概能了解this基础指向的问题,抛开例子去说this太虚幻,这里还是结合几篇博文做个整理,算是个人的记录了。
先说概念,this指向与申明无关,永远指向距离自己最近的最终调用者。我们从几种调用情况去理解,下面看看例子理解下:
1.函数的直接调用
function a(){
var age = '';
console.log(this.age);//undefined
console.log(this);//window }
a();
如上,我们申明一个函数,然后直接调用,a()前面没任何调用它的对象,这时候我们一般理解为被全局window对象调用,那我们就得去window去找age属性,很明显window没有,这里输出undefined。
我们改改代码,用window去调用函数a,同时定义a的age属性,如下:
window.age = "";
function a(){
var age = '';
console.log(this.age);//
console.log(this);//window
}
window.a();
那我们可以这样理解,针对函数调用,我们在一个函数内申明this,我们去看它最终是被谁调用,如果最终的调用前啥都没有,this就会指向window,这里只是针对js非严格模式。
function a(){
var age = '';
console.log(this.age);//undefined
console.log(this);//window
}
function b(){
a();
}
b();
你以为我说到这,函数调用的this问题就说完了?不存在的,死记硬背难啊,情况多变,为什么函数直接调用,前面啥都没有就指向window,为什么?
我在知乎看到一篇从函数调用原理讲this的文章,这里就引入下,这是知乎原文 this 的值到底是什么?一次说清楚
func(a,b) ==>func.call(undefined,a,b)
obj.child.method ==> obj.child.method.call(obj.child,a,b)
//因为不确定obj里面的method是属于obj的属性还是boj child的属性,再加个
obj.method ==> obj.method.call(obj,a,b)
那我们就可以将所有的函数调用统一为 func.call(context,a,b)这一种,如果不是这一种,按照上面去改写,其中context就是我们一直苦苦寻找的this.
OK,上面是函数的普通调用,咱们来改写上面的例子。
function a(){
var age = '';
console.log(this.age);//undefined
console.log(this);//window }
a();//等价于a.call(undefined);
那按照我们上面说的,this应该是undefined啊,为毛是Window,这里又插入一个小规则
如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)
那这里我们就明白为啥普通函数直接调用,this指向window了。
2.函数作为对象属性方法被调用
怎么去解释,我们还是用上面函数调用的改写去理解,先看一个例子。
var a = {
age:"",
fn:function(){
console.log(this.age); //
}
}
a.fn();//等价于 a.fn.call(a)
//参照obj.method ==> obj.method.call(obj,a,b)来看
method fn是对象a的一个属性,照着上面的对等公式,最终this指向就是对象a自己,也验证了上面我们说的,this指向它最终的的调用者。
再来看一个例子:
var a = {
age:,
func:{
age:,
fn:function(){
console.log(this.age); //
}
}
}
a.func.fn();//等价于 a.method.fn.call(a.method)
//参照obj.child.method ==> obj.child.method.call(obj.child,a,b)来看
func是对象a的一个child属性,而方法fn包含在func内,所以参照这个公司,this指向了a.func,而a.func提供了age属性,这里就输出12了,问题不大吧?
那我们现在来融合函数调用与对象调用来看个例子:
var a = {
age:,
func:{
age:,
fn:function(){
console.log(this.age); //undefined
console.log(this); //window
}
}
}
var j = a.func.fn;
j();//等价于 window.j()或者j.call(undefined)
跟我读,this指向最终,且离自己最近的调用者,最终调用的是方法j(),按照改写说得通,按照我们说的方法前面啥都没有就是window也说的通,就是这个意思了。
3.构造函数的调用
我们先来看个例子,当我们输出a.user,this指向了谁?
function Fn(){
this.age = ;
}
var a = new Fn();
console.log(a.age);//
先明白this指向谁,我们要弄懂什么是构造函数,new干嘛了?var a =new Fn()干嘛了?
构造函数就是初始化一个实例对象,当我们new Fn()其实就是将Fn()复制了一份,并作为对象返回,赋值给了变量a。
我们可以console a,得到的就是Fn()函数的实例,而且继承了Fn里面的age属性,所以此时this指向a,a里面有age属性。
我们来白话一遍,这样说,当我们用构造函数方法,this指向我们new出来返回的对象,就是复制Fn得到了一个Fn副本,this指向了Fn副本,而这个Fn副本被赋予给了变量a,于是this指向了a,这个Fn副本继承了原函数的属性,所以这里顺利的输出了25.(并不是复制了整个函数,这句话有问题,我暂时不理解)
构造函数与return
我在上面说,构造函数this会指向new之后的实例(复制出来的副本),但如果在函数里有return,this指向可能会发生变化。
function Fn(){
this.age = ;
return {age:};
}
var a = new Fn();
console.log(a); //{age:18}
console.log(a.age);//
很明显,return的对象赋值给了变量a,这里输出了18.再来看看这段代码:
function Fn()
{
this.age = '';
return function(){};
}
var a = new Fn();
console.log(a.age); //undefined
再来一段代码:
function Fn()
{
this.age = ;
return ;
}
var a = new Fn();
console.log(a.age); //
我们可以做个大致判断,当在构造函数中return 一个对象时,this会指向这个对象,如上面的第一 ,第二段代码,但如果return的不是一个对象,那就不会改变this指向,还是指向new 出来的实例。
------取自JS权威指南8.2.3节
大概整理到这,后期再回来填坑。
参考资料
白话js this指向问题的更多相关文章
- 彻底搞懂js this指向问题
在这里必须要提一句的是,this指向是学习js必须要掌握的(必须),再开始之前先看底部的总结,然后回上面看例子便一目了然. 例子1: function a(){ var user = "Ta ...
- JS this指向
正常模式 在正常模式下独立函数的的 this 指向 undefined 或 window. <script type="text/javascript"> functi ...
- JS this指向问题
<button onclick=(function(){alert(this)})()>I'm button</button>//this指代window <button ...
- js this指向理解
1.如果调用this的函数上级有多个对象,this只会指向上一级对象 下面实例fn函数调用this时,this指向b对象,如果b里面有a属性就输出值: 如果没有就是undefined 在来看下下面的实 ...
- JS—-this指向
箭头函数中this对象就是定义时所在的作用域,也就是说箭头函数本身没有this,内部的this就是外层代码块作用域中的this. 1.独立函数 var a = 0var test = ()=> ...
- JS this指向总结
使用 JavaScript 开发的时候,很多开发者多多少少会被 this 的指向搞蒙圈,但是实际上,关于 this 的指向,记住最核心的一句话:哪个对象调用函数,函数里面的this指向哪个对象. 下面 ...
- js this 指向
JavaScript 作为一种脚本语言身份的存在,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.由于其运行期绑定的特性,Java ...
- js this指向汇总
this指向 普通函数 window 定时器函数 window 事件函数 事件源 箭头函数 父function中的this,没有就是window 对象函数 对象本身 构造函数 实例化 ...
- 可能是史上最强大的js图表库——ECharts带你入门
PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?&g ...
随机推荐
- 《A computer-aided healthcare system for cataract classification and grading based on fundus image analysis》学习笔记
Abstract This paper presents a fundus image analysis based computer aided system for automatic class ...
- poj 3083 Children of th
#include <iostream> #include<stdio.h> #include<string.h> using namespace std; int ...
- Http站点转Https站点教程
https://blog.csdn.net/tanga842428/article/details/79273226 Http站点转Https站点教程 2018年02月28日 12:04:35 坦GA ...
- caffe 训练imagenet
1.整理得到自己的数据库,并生成自己数据库的列表文件.txt 2.将数据库转成lmbp格式 3.计算图像均值 4.修改网络参数 5.得到结果 1.整理得到自己的数据库 因为前面博文提到的原因,技术水平 ...
- 二、基于kubernetes构建Docker集群环境实战
kubernetes是google公司基于docker所做的一个分布式集群,有以下主件组成 etcd: 高可用存储共享配置和服务发现,作为与minion机器上的flannel配套使用,作用是使每台 m ...
- Win10家庭版无法远程桌面连接的解决方法
远程桌面连接服务器,是大家常用的一个桌面功能.在XP.Win7时代,大部分同学都是使用“盗版”操作系统,分分钟弄个“旗舰版”没有问题.可是,到了Win8.Win10时代,许多电脑都是预装的Window ...
- adb错误 - INSTALL_FAILED_NO_MATCHING_ABIS
#背景 换组啦,去了UC国际浏览器,被拥抱变化了.还在熟悉阶段,尝试了下adb,然后就碰到了这个INSTALL_FAILED_NO_MATCHING_ABIS的坑... #解决方法 INSTALL_F ...
- Windows核心编程:第7章 线程调度、优先级和关联性
Github https://github.com/gongluck/Windows-Core-Program.git //第7章 线程调度.优先级和关联性.cpp: 定义应用程序的入口点. // # ...
- 201621123018《Java程序设计》第6周学习报告
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 1.1 在 ...
- lua编程之lua与C相互调用
lua是扩展性非常良好的语言,虽然核心非常精简,但是用户可以依靠lua库来实现大部分工作.除此之外,lua还可以通过与C函数相互调用来扩展程序功能.在C中嵌入lua脚本既可以让用户在不重新编译代码的情 ...