js中的this问题
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这家伙
这里从表面看,会认为第一个输出的是这个btn按钮,不是说谁调用指向谁么,但是咋们仔细看这个是btn在调用么???
其实是这个点击事件的匿名函数在调用,而这fn()本身是全局上下文的函数,它的this指向的是全局,它是作为这个匿名函数的普通函数,自然指向的全局
我们如果这样写
myBtn.onclick=fn;//btn点击的时候就指向这个btn了,这时候输出结果为这个button,
总结
特殊情况
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问题的更多相关文章
- 5.0 JS中引用类型介绍
其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
- 【repost】JS中的异常处理方法分享
我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...
- JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
- js中几种实用的跨域方法原理详解(转)
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
- 关于js中的this
关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...
- 表值函数与JS中split()的联系
在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...
- JS中 call() 与apply 方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查
Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...
- 分析js中的constructor 和prototype
在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...
- 如何在Node.js中合并两个复杂对象
通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object: ...
随机推荐
- Python博文列表
手把手|100行Python代码自动抢火车票!(包教包会):https://zhuanlan.zhihu.com/p/32928355 最全中华古诗词数据库, :https://github.com/ ...
- How to: Create a Business Model in the XPO Data Model Designer
How to: Create a Business Model in the XPO Data Model Designer This topic provides step-by-step inst ...
- 23.3Sum(三数和为零)
Level: Medium 题目描述: Given an array nums of n integers, are there elements a, b, c in nums such tha ...
- elementui bug ..
.el-menu { overflow: hidden !important;} element 菜单导航栏 会 超出 父组件一点..在组件中加上上边那句来隐藏!!!
- HDU6312 Game(博弈,拿出本数与这个数的除数)
题意:A和B玩游戏 , 给出1 ~ n 的集合 ,每个人可以拿出一个数 , 这个数的除数也被拿出 , A先开始 , 没有数拿的人就输 , 问A赢不赢 分析:很有意思的一道题目 ///假设2 ~ n A ...
- 高精度的N进制转换模板(转K神)
/* 高精度进制转换 把oldBase 进制的数转化为newBase 进制的数输出. 调用方法,输入str, oldBase newBase. change(); solve(); output(); ...
- [转] JavaScript中的Truthy和Falsy介绍
[From] http://www.jb51.net/article/59285.htm 与大多数编程语言一样,JavaScript中存在boolean类型,以供逻辑判断使用.不过,和很多其它编程语言 ...
- 计算两个日期相差的天数 js php日期 减一年
计算两个日期相差的天数 //sDate1和sDate2是yyyy-MM-dd格式 function dateDiff(sDate1, sDate2) { var aDate, oDate1, oDat ...
- Oracle 更改归档文件到ASM磁盘
01,配置磁盘路径
- (转)Linux下通过rsync与inotify(异步文件系统事件监控机制)实现文件实时同步
Linux下通过rsync与inotify(异步文件系统事件监控机制)实现文件实时同步原文:http://www.summerspacestation.com/linux%E4%B8%8B%E9%80 ...