javascript 中的 this 关键字详解
1.javascript 中 什么是 this?
this 指的是当前行为执行的主体,或者是当前方法执行的主体
context:是当前行为或者方法执行的环境
实例:
xx 去北京饭店吃东西;上下文是“北京饭店”, this 是 xx
2. 那么如何判断一个函数在执行的时候,函数体内的 this 关键字是谁呢?主要有以下几条规律:
1)一个函数体内的 this 关键字和这个函数的在哪里定义,哪里执行都没有关系;
2) 判断一个方法执行的时候,函数的执行主体是谁?主要看方法前面有没有点(.),如果函数执行的时候,函数前面有点 (.),点(.) 前面是谁,这个函数被执行的时候,函数体内的 this 关键字就是谁;
且看代码:
函数执行的时候,前面没有点的情况:
function fn() {
console.log(this.name);
}
window.name = 'windwo";
fn();
函数以 xx.fn的方式执行的时候:
person = {
name:'alice',
}
function fn(){
console.log(this.name);
}
//给person 对象添加一个方法
person.fn = fn;
person.fn();
3) 自执行函数执行的时候,函数体内的 this 关键字永远是 window 对象(和自执行函数在哪里执行没有任何关系);
window.name = 'window';
function fn(){
console.log(this.name);
}
var person = {
name: 'alice',
//匿名函数执行的时候, this 关键字指向 window
// 匿名函数的执行结果:person 对象的 sayName属性指向 fn
sayName:(function(){
console.log(this.name);
return fn;
})(),
age:25
};
//执行结果:输出 window ,alice
person.sayName();
4)给元素绑定的事件,事件触发的时候,被绑定到元素上的事件处理函数被执行的时候,函数的 this 关键字指向这个绑定事件的元素;
var oDiv = document.getElementsById("div1");
oDiv.onclick = fn;
function fn(){
console.log(this.id);//输出结果是 div1
}
如果上面都理解了,下面来看这个例子,加深下映像,看看是否都真正理解了 this 关键字:
var number = 2;
var obj = {
number: 4,
fn1: (function() {
this.number *= 2;//window.number =4
number = number * 2;//undefined
var number = 3;//number =3
return function() {
this.number *= 2;
number *= 3;
alert(number)
}
})(),
db2: function() {
this.number *= 2;
}
}
var fn1 = obj.fn1;
alert(number);
fn1();
obj.fn1();
alert(window.number);
alert(obj.number);
javascript 中的 this 关键字详解的更多相关文章
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- javascript 中合并排序算法 详解
javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的... 合并排序代码如下: <script type="text/javascript& ...
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- C\C++中的 struct 关键字详解
struct关键字是用来定义一个新的类型,这个新类型里面可以包含各种其他类型,称为结构体. 1. 什么是结构体 结构体(struct)是一种自定义的数据类型,就是把一组需要在一起使用的数据元素组合成一 ...
- JavaScript中的async/await详解
1.前言 async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字 ...
- Javascript中prototype属性的详解
原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...
随机推荐
- 第149天:javascript中this的指向详解
js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看: 1.全局作用域或者普通函数中this指向全局对象w ...
- 第81天:jQuery 插件使用方法
在追求页面互动效果的时代,大家都想把页面效果做的美轮美奂,这一切都离不开前端技术脚本Javascript,而最近常被人用到的Javascript库文件则是jQuery. jQuery的使用具体步骤如 ...
- web端调百度地图页面
在点击进入地图的入口(下面数据是vue渲染的数据) <a class="navigation" v-if="merchant.longitude && ...
- bzoj1007-水平可见直线
题目 在平面直角坐标系上以\(y=kx+b\)的形式给出\(n (n\le 50000)\)条直线,求从无限高的地方能看到多少条直线. 分析 举几个例子发现我们要求的直线组成一个下凸的形状.所以我们只 ...
- OSPF协议介绍及配置 (下)
4.特殊区域详解 为了让我们的讲解更加的通俗易懂,我们看上面这个拓扑,这是一个根据客户业务逻辑结构所涉及的OSPF网络,共有三个区域(实际上远远不止),骨干区域area0为一级行及二级行所部署,*** ...
- a++ 和 ++a 的区别
a++ 和 ++a 的区别 1)首先说左值和右值的定义: 变量和文字常量都有存储区,并且有相关的类型.区别在于变量是可寻址的(addressable)对于每一个变量都有两个值与其相联: ...
- [Violet]蒲公英 分块
发现写算法专题老是写不动,,,, 所以就先把我在luogu上的题解搬过来吧! 题目大意:查询区间众数,无修改,强制在线 乍一看是一道恐怖的题,仔细一看发现并没有那么难: 大致思路是这样的,首先我们要充 ...
- Eclipse如何将代码变成大写/小写
代码变小写:选中要换的代码,操作Ctrl+Shift+y即可将大写变小写 代码变大写:选中要换的代码,操作Ctrl+Shift+x即可将小写变大写
- 洛谷 P4219 [BJOI2014]大融合 解题报告
P4219 [BJOI2014]大融合 题目描述 小强要在\(N\)个孤立的星球上建立起一套通信系统.这套通信系统就是连接\(N\)个点的一个树. 这个树的边是一条一条添加上去的.在某个时刻,一条边的 ...
- [ACM][2018南京预赛]Lpl and Energy-saving Lamps
一.题面 样例输入: 5 4 3 10 5 2 7 10 5 1 4 8 7 2 3 6 4 7 样例输出: 4 0 1 1 3 6 5 1 5 1 2 0 3 2 4 4 3 6 5 1 二.思路 ...