前言

  通过本文,你大概能了解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 的值到底是什么?一次说清楚

  函数一般常见三种调用方式,其实对于我是两种
 
  1.func(a,b)---普通函数调用
 
  2.obj.child.method(context,a,b)---调用对象内的某个方法,这个方法相当于对象的子属性
 
  3.func.call(context,a,b)---这个我确实在调用中没怎么用过。
 
  对于前两种,普通调用,对象属性的函数调用我们都常见,而第三种其实才是我们原本函数该有的调用,那我们这个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的指向,不必硬背。

this 的值到底是什么?一次说清楚

this详解

白话js this指向问题的更多相关文章

  1. 彻底搞懂js this指向问题

    在这里必须要提一句的是,this指向是学习js必须要掌握的(必须),再开始之前先看底部的总结,然后回上面看例子便一目了然. 例子1: function a(){ var user = "Ta ...

  2. JS this指向

    正常模式 在正常模式下独立函数的的 this 指向 undefined 或 window. <script type="text/javascript"> functi ...

  3. JS this指向问题

    <button onclick=(function(){alert(this)})()>I'm button</button>//this指代window <button ...

  4. js this指向理解

    1.如果调用this的函数上级有多个对象,this只会指向上一级对象 下面实例fn函数调用this时,this指向b对象,如果b里面有a属性就输出值: 如果没有就是undefined 在来看下下面的实 ...

  5. JS—-this指向

    箭头函数中this对象就是定义时所在的作用域,也就是说箭头函数本身没有this,内部的this就是外层代码块作用域中的this. 1.独立函数 var a = 0var test = ()=> ...

  6. JS this指向总结

    使用 JavaScript 开发的时候,很多开发者多多少少会被 this 的指向搞蒙圈,但是实际上,关于 this 的指向,记住最核心的一句话:哪个对象调用函数,函数里面的this指向哪个对象. 下面 ...

  7. js this 指向

    JavaScript 作为一种脚本语言身份的存在,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.由于其运行期绑定的特性,Java ...

  8. js this指向汇总

    this指向 普通函数  window 定时器函数         window 事件函数 事件源 箭头函数 父function中的this,没有就是window 对象函数 对象本身 构造函数 实例化 ...

  9. 可能是史上最强大的js图表库——ECharts带你入门

    PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?&g ...

随机推荐

  1. Scala_方法、函数、柯里化

    方法.函数.柯里化 方法 声明方法: scala> def m1(x:Int,y:Int):Int = {     | x + y     | }m1: (x: Int, y: Int)Ints ...

  2. 压力测试 mac ab

    apache ab:http://blog.chinaunix.net/uid-20382003-id-3032167.html 简单用法: ab -n 3000 -c 3000 http://www ...

  3. nodeclub models

    之前看过keystone的结构,所以现在看nodeclub时,总会和keystone进行比较. nodeclub models会有一个index来作为facade,通过它连接mongodb,expor ...

  4. CentOS 7.2通过yum安装MairaDB 10.1

    CentOS 7.2自带的yum源中mysql已经被替换成了mariadb,然而却是5.5版本,匹配mysql5.5,想要使用mysql 5.7的特性需要mariadb 10.0或10.1版本,10. ...

  5. [leetcode 14]Longest Common Prfix

    1 题目: Write a function to find the longest common prefix string amongst an array of strings. Hide Ta ...

  6. TwoSum / Three Sum

    Let's begin with a naive method. We first need to sort the array A[n]. And we want to solve the prob ...

  7. SQL注入之PHP-MySQL实现手工注入-字符型

    SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意的)SQL命令注入到后台数据库引擎 ...

  8. 36_并发编程-multiprocess模块

    仔细说来,multiprocess不是一个模块而是python中一个操作.管理进程的包. 之所以叫multi是取自multiple的多功能的意思,在这个包中几乎包含了和进程有关的所有子模块.由于提供的 ...

  9. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  10. flask-Datatables

    我先给大家推荐一个jQuery开源库网址  http://www.jq22.com/ Datatables 是一款jquery表格插件.他是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能 ...