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: ...
随机推荐
- P2057 [SHOI2007]善意的投票 (最大流)
题目 P2057 [SHOI2007]善意的投票 解析 网络流的建模都如此巧妙. 我们把同意的意见看做源点\(s\),不同意的意见看做汇点\(t\). 那我们\(s\)连向所有同意的人,\(t\)连向 ...
- alter table添加表约束
翻阅了一下网上关于alter table添加表约束的资料,学习下,然后供自己以后使用. 仅仅供自己使用... 总结alter table ### add constraint ## 使用方法 添加表约 ...
- [HNOI/AHOI2018]排列
[Luogu4437] 如果\(a[i]=j\)则序列\(p[]\)中\(j\)必须排在\(i\)前面,如果\(j\)不在范围内则不管,求一个式子\(\sum_{i=1}^n iw_{p[i]}\)的 ...
- 【算法笔记】B1016 部分A+B
1016 部分A+B (15 分) 正整数 A 的“DA(为 1 位整数)部分”定义为由 A 中所有 DA 组成的新整数 PA.例如:给定 A=3862767,DA=6,则 A ...
- bzoj3252 攻略 dfs序+线段树
题目传送门 题目大意:给出一棵树,1为根节点,每个节点都有权值,每个叶子节点都是一个游戏的结局,选择k个游戏结局,使得权值总和最大,同一个节点不会被重复计算. 思路:这道题最关键的是要想到一个性质,就 ...
- POJ 3258:River Hopscotch (最大化最小值)
[题意] 牛要到河对岸,在与河岸垂直的一条线上,河中有N块石头,给定河岸宽度L,以及每一块石头离牛所在河岸的距离, 现在去掉M块石头,要求去掉M块石头后,剩下的石头之间以及石头与河岸的最小距离的最大值 ...
- ZOJ - 2401 水DP
最近会多做点巩固基础的题目 #include<iostream> #include<algorithm> #include<cstdio> #include< ...
- HDU - 4763 找出特殊规律的串
在一个Text串中找出Pattern串E以满足EAEBE,A B可以是任意串 看一眼觉得woc好难,后来看一下样例AB为空也可以 找观察一下E既是前缀也是后缀,很容易联想到next 最优情况EEE,那 ...
- 小数据池 is 和 == ,以及再谈编码
一.小数据池 1.id() 小数据池针对的是:int ,str,boo(都是不可变的数据类型) (1)如果是在py文件中写的字符串,几乎都是缓存的 (2)在黑窗口里写的机会都不会缓存 (3)不同的解释 ...
- 字典树+map
Problem Description Carryon最近喜欢上了一些奇奇怪怪的字符,字符都是英文小写字母,但奇怪的是a可能比b小,也可能比b大,好奇怪.与此同时,他拿到了好多的字符串,可是看着很不顺 ...