this

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上

this的最终指向的是那个调用它的对象(这里其实并不完全对,this的指向有时候会很微妙,得靠自己去慢慢体会)

只有方法在对象上,对象调用当前方法,指向当前对象

function  fnThis(){
let user='js';
console.log(this.user)//undefined
console.log(this)//global(window)
}
fnThis();
这里为什么会输出一个全局的对象?因为我们申明的函数,在全局里,现在执行这个函数
实际上是全局在调用
let obj={
user:'js',
fn:function(){
console.log(this.user)
}
obj.fn();
这里是obj在调用,所以指向我们的obj,这并不能说明,我们一开始就说的this最终调用他的那个
对象 let obj={
user:'js',
objTwo:{
user:'css',
fn:function(){
console.log(this.user)
}
}
}
obj.objTwo.fn();
这里只是指向了obj2,而并没有指向最终调用它的obj.

来个料咋们看看this这家伙

<button id="myBtn" value="按钮">按钮</button>
<script>
let myBtn=document.querySelector("#myBtn")
let fn=function(){
  console.log(this);
}
myBtn.onclick=function(){
  fn();//输出的全局
  console.log(this);//输出的是这个button
}
</script>

这里从表面看,会认为第一个输出的是这个btn按钮,不是说谁调用指向谁么,但是咋们仔细看这个是btn在调用么???

其实是这个点击事件的匿名函数在调用,而这fn()本身是全局上下文的函数,它的this指向的是全局,它是作为这个匿名函数的普通函数,自然指向的全局

我们如果这样写

myBtn.onclick=fn;//btn点击的时候就指向这个btn了,这时候输出结果为这个button,

总结

1. 全局上下文,或者普通函数上下文里面的this,包括函数里面的普通函数,都是指向全局
2. 在对象方法里面的this指向该对象
3. 在事件方法里面的this指向发生事件的这个对象

特殊情况

let obj={
user:'js',
objTwo:{
user:'css',
fn:function(){
console.log(this.user)
console.log(this)
}
}
} let objThre=obj.objTwo.fn;
objThree();
把函数赋值给了objThree,而objThree是在全局上,所以输出的是全局

补充

let chinesePeople=function(){
this.name='张飞';
return obj
}
如果返回的是对象,this就指向返回的那个对象,否则就指向实例对象

改变的几种方式

let obj={a:80}
let objTwo={
a:70,
fn:function(){
console.log(this.a);
}
}
objTwo.fn.call(obj);
调用一个方法,并改变其this指向
objTwo.fn.apply(obj);
调用一个方法,并改变其this指向 前2者区别,在于后面的参数,一个是顺序,一个是数组 objTwo.fn.bind(obj)(); bind()方法会创建一个新函数,在绑定后,我们可以加括号立即执行,也可以等需要执行再执行
第一个参数对象,以后的顺序传参 new方法,其实是隐藏的调用了一个call的方法

js中的this问题的更多相关文章

  1. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  2. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  3. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  4. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  5. 关于js中的this

    关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...

  6. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...

  7. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  8. 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查

    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...

  9. 分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  10. 如何在Node.js中合并两个复杂对象

    通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object: ...

随机推荐

  1. Macaca,Maven,MVC框架

    Macaca:Macaca是阿里开源的一套完整的自动化测试解决方案.同时支持PC和移动端测试,支持的语言有JS,Java,Python. Maven:java,Maven项目对象模型(POM),可以通 ...

  2. [BZOJ 4850][Jsoi2016]灯塔

    传送门 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) ...

  3. 【算法笔记】B1006 换个格式输出整数

    1006 换个格式输出整数 (15 分) 让我们用字母 B 来表示“百”.字母 S 表示“十”,用 12...n 来表示不为零的个位数字 n(<10),换个格式来输出任一个不超过 3 位的正整数 ...

  4. A Simple Math Problem(矩阵快速幂)----------------------蓝桥备战系列

    Lele now is thinking about a simple function f(x).  If x < 10 f(x) = x.  If x >= 10 f(x) = a0 ...

  5. Tensorlflow-解决非线性回归问题

    import tensorflow as tfimport numpy as npimport matplotlib.pyplot as plt #使用numpy生成200个随机点,范围从-0.5到0 ...

  6. hdu6183 Color it 线段树动态开点+查询减枝

    题目传送门 题目大意: 有多次操作.操作0是清空二维平面的点,操作1是往二维平面(x,y)上放一个颜色为c的点,操作2是查询一个贴着y轴的矩形内有几种颜色的点,操作3退出程序. 思路: 由于查询的矩形 ...

  7. C++ STL之Vector

    向量 vector 是一种对象实体, 能够容纳许多其他类型相同的元素, 因此又被称为容器. vector 属于STL(Standard Template Library, 标准模板库)中的一种自定义的 ...

  8. [转] 浏览器自动化测试初探:使用 phantomjs 与 casperjs

    [From] https://www.qcloud.com/community/article/641602001489391648 作者:yangchunwen 首先要解释一下为什么叫浏览器自动化测 ...

  9. linux下——java——new Font("Times New Roman", 0, 18)验证码图片变成字符

    j'ava部署到了tomcat,发现了一个问题,我们登录的验证码出现了乱码,和字符 然而在windows服务器上,或者说我们本地的开发环境上面,则没有这种现象, 这是为什么? 查看源码,发现有一段代码 ...

  10. (转)跟着老男孩一步步学习Shell高级编程实战

    原文:http://oldboy.blog.51cto.com/2561410/1264627/  跟着老男孩一步步学习Shell高级编程实战 原创作品,允许转载,转载时请务必以超链接形式标明文章 原 ...