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 关键字详解的更多相关文章

  1. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  2. javascript中的this作用域详解

    javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...

  3. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  4. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  5. javascript 中合并排序算法 详解

    javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的...  合并排序代码如下: <script type="text/javascript& ...

  6. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  7. C\C++中的 struct 关键字详解

    struct关键字是用来定义一个新的类型,这个新类型里面可以包含各种其他类型,称为结构体. 1. 什么是结构体 结构体(struct)是一种自定义的数据类型,就是把一组需要在一起使用的数据元素组合成一 ...

  8. JavaScript中的async/await详解

    1.前言 ​ async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字 ...

  9. Javascript中prototype属性的详解

    原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...

随机推荐

  1. Geek荣耀大会总结

    0.0 首先没有被抽中, 其次可乐真难喝,再次我没有去拍无人机合影,再再次还是很受打击的. 1.0 其实 对geek 和1024大会无感,主要原因 没有三倍加班费的节日在我眼里都不是节日. 上面只是简 ...

  2. 内存测试——Android Studio自带内存检测功能

    AndroidStudio 自带 CPU 和内存检测工具,绘制出变化图,可以直观明了的看出内存和cpu的变化曲线. 手机连接电脑,选择要调试的手机,选择要检测的应用进程,Memory是内存监控,CPU ...

  3. 第168天:json对象和字符串的相互转换

    json对象和字符串的相互转换 1.json对象和字符串的转换 在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和pa ...

  4. 第154天:canvas基础(一)

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

  5. BZOJ 1444 有趣的游戏(AC自动机+矩阵快速幂)

    真的是很有趣的游戏... 对每个单词构建好AC自动机后,由于单词都是相同长度的且不同,所以不会出现互相为子串的形式. 那么我们对AC自动机上的节点构建转移矩阵.对于每个单词末尾的节点.该节点的出边仅仅 ...

  6. 【刷题】BZOJ 2142 礼物

    Description 一年一度的圣诞节快要来到了.每年的圣诞节小E都会收到许多礼物,当然他也会送出许多礼物.不同的人物在小E 心目中的重要性不同,在小E心中分量越重的人,收到的礼物会越多.小E从商店 ...

  7. 【BZOJ4361】isn(动态规划,容斥)

    [BZOJ4361]isn(动态规划,容斥) 题面 BZOJ 题解 首先我们如果确定了一个不降序列,假设它的长度为\(i\), 那么可行的方案数为\(i*(n-i)!\),但是这样有一些非法的情况,即 ...

  8. Redis的List链表类型命令

    List是一个链表结构,主要功能是push.pop.获取一个范围的所有值等等,操作中key理解为链表的名字.list类型其实就是一个每个子元素都是string类型的双向链表.我们可以通过push.po ...

  9. Linux内核分析第五周学习总结——分析system_call中断处理过程

    Linux内核分析第五周学习总结--分析system_call中断处理过程 zl + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...

  10. 【bzoj3173】最长上升子序列

    Portal --> bzoj3173 Solution 感觉自己需要智力康复qwq 首先题目给的这个序列肯定是一个\(1-n\)的排列,并且插入的顺序是从小到大 仔细思考一下会发现如果知道了最 ...