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. php 镜像richarvey/nginx-php-fpm的ngnix配置

    1.遇到错误option error_page 405 =200 $request_uri; location ~ ^/(json)/ { # root /data/website/xxxx.com/ ...

  2. 格子刷油漆(dp)-----------蓝桥备战系列

    标题:格子刷油漆 X国的一段古城墙的顶端可以看成 2*N个格子组成的矩形(如图1所示),现需要把这些格子刷上保护漆. 你可以从任意一个格子刷起,刷完一格,可以移动到和它相邻的格子(对角相邻也算数),但 ...

  3. bzoj2212 Tree Rotations 线段树合并+动态开点

    题目传送门 思路: 区间合并线段树的题,第一次写,对于一颗子树,无论这个子树怎么交换,都不会对其他子树的逆序对造成影响,所以就直接算逆序对就好. 注意叶子节点是1到n的全排列,所以每个权值都只会出现1 ...

  4. KD树的极简单笔记(待后续更新)

    今天(18.5.4)室友A突然问我算法怎么入门,兴奋之下给他安利了邓公的<数据结构>,然而他接着又问我能不能两周内快速入门,毕竟打算搞Machine Learning,然后掏出手机看了下他 ...

  5. HDU - 2842

    要拆第n个环要求保留第n-1拆除前n-2 对于n,先拆掉n-2再去掉n再放回n-2,然后规模降为n-1 f(n)=2f(n-2)+f(n-1)+1 inline ll mod(ll a){return ...

  6. Spring 操作 jdbc 链接数据库

    1. 新建资源文件 db.properities jdbc.user=root jdbc.password=root jdbc.driverClass=com.mysql.jdbc.Driver jd ...

  7. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  8. 搭建Flask+Vue及配置Vue 基础路由

    最近一直在看关于Python的东西,准备多学习点东西.以前的项目是用Vue+Java写的,所以试着在升级下系统的前提下.能不能使用Python+Vue做一遍. 选择Flask的原因是不想随大流,并且比 ...

  9. PIE SDK打开栅格数据

    1. 功能简介 GIS将地理空间数据表示为矢量数据和栅格数据.矢量数据模型使用点.线和多边形来表示具有清晰空间位置和边界的空间要素,如控制点.河流和宗地等,每个要素被赋予一个ID,以便与其属性相关联. ...

  10. PIE SDK栅格数据的金字塔创建

    1. 功能简介 金字塔可用于改善性能,可以加快栅格数据的显示速度.随着放大操作的进行,各个更精细的分辨率等级将逐渐得到绘制;但性能将保持不变:目前PIE SDK支持栅格数据的金字塔创建,下面对栅格数据 ...