全局上下文

console.log(this === window);  //true

函数上下文

直接调用

function fn(){

    return this;

}

fn() === window;  //true

//this的值不是由函数调用设定，默认为全局对象

严格模式下增强了安全措施，this关键字禁止指向全局对象

function fn(){

    "use strict";

    return this;

}

fn() === undefined;  //true

function f(){

    "use strict";

    this.a = 1;

}

f();// 报错，this未定义

var fun = new f();

console.log(fun.a);  //1

对象方法中的this

指向调用该函数的对象，并且是最靠近的引用

var o = {prop: 37};

function independent() {

    return this.prop;

}

o.f = independent;

o.b = {

    g: independent,

    prop: 42

};

console.log(o.f());  //logs 37

console.log(o.b.g());  //logs 42

构造函数中的this

与即将被创建的新对象绑定，可手动设置返回对象

function C(){

    this.a = 37;

}

var o = new C();

console.log(o.a);  //logs 37

function C2(){

    this.a = 37;

    return {a:38};

}

o = new C2();

console.log(o.a);  //logs 38

call和apply

this的值被绑定到一个指定的对象上

如果传递的this值不是一个对象，则会使用ToObject操作将其转换为对象

function bar() {

    console.log(Object.prototype.toString.call(this));

}

bar.call(7); // [object Number]

//会通过new Number(7)转换为对象

//如果是字符串则会通过new String('foo')转换为对象

bind

Function.prototype.bind

会创建一个具有相同函数体和作用域的函数，但是新函数的this被永久绑定到bind的第一个参数上，无论这个函数如何被调用

function f(){

    return this.a;

}

var g = f.bind({a:"azerty"});

console.log(g());  //azerty

var o = {a:37, f:f, g:g};

console.log(o.f(), o.g());  //37, azerty

DOM事件处理函数中的this

事件处理函数中的this指向触发事件的函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="btn">button</button>

<script>

    function eventHandler() {

        //this指向#btn

        console.log(this);  //<button id="btn">button</button>

    }

    var btn = document.querySelector('#btn');

    btn.addEventListener('click', eventHandler, false);

</script>

</body>

</html>

内联事件处理函数中的this

指向监听器所在DOM元素

<!--

<button onclick="console.log(this);">

    Show this

</button>

-->

<button onclick="alert(this);">

  Show this

</button>

<!--window对象，因为没有设置内部函数的this，非严格模式下默认指向全局对象-->

<button onclick="alert((function(){return this})());">

  Show inner this

</button>

参考

this - JavaScript | MDN

Javascript 严格模式详解

JavaScript笔记——this的取值的更多相关文章

用javascript/jQuery给CKEditor取值/赋值
CKEditor 是著名的 HTML 编辑器,IBM.Oracle.Adobe 等都在用.CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更 ...
SpringBoot学习笔记(2)----配置文件取值
今天介绍三种配置文件手动取值的方式: springboot配置文件信息保存在application.properties中,默认可以spring.开头的进行spring进行一些常用参数的配置,但是很多 ...
转：javascript 中select的取值
javascript获取select的值全解获取显示的汉字 document.getElementById("bigclass").options[window.document ...
Javascript 数组之判断取值和数组取值
题目一:var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, docum ...
javascript 下拉列表　自动取值　无需value
<select id="applyType" name="$!{status.expression}" class="inp" onc ...
javascript中json对象与字符串互转及取值
一. json字符串转换为javascript对象,并取值 var answer = '{"id":0}' var value= JSON.parse(answer); //转 ...
javascript 核心语言笔记- 3 - 类型、值和变量
JavaScript 中的数据类型分为两类:原始类型(primitive type)和对象类型(object type).原始类型包括数字.字符串和布尔值 JavaScript 中有两个特殊的原始值: ...
JavaScript —— 对象的取值与赋值
可能是因为用惯了 Java ,对一个对象取值/赋值喜欢用 setXXX() 和 getXXX() . 在 JavaScript 中使用 setValue() 时,遇到了个奇怪的问题,所以查了下 Jav ...
关于模板中的动态取值 ---反射与javascript脚本编译
在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售 ...

随机推荐

hdu 4036 2011成都赛区网络赛F 模拟 **
为了确保能到达终点,我们需要满足下面两个条件 1.能够到达所有山顶 2.能够在遇到苦土豆时速度大于他二者的速度可以用能量守恒定律做,苦土豆的坐标可通过三角形相似性来做 #include<cst ...
物化视图刷新慢--有可能是mv log被多个mv使用造成的
同事说物化视图刷新慢,经检生产环境,发现部分物化视图刷新慢的原因是:由于同一个物化视图日志(mv log)被多个物化视图(mv)使用,不同的物化视图(mv)使用不同的刷新间隔,导致物化视图日志(mv ...
思想&观点&人生
思想: 思想的直接表现往往是对事物的观点,观点越多并且越接近本质,表示思想越丰富和深刻观点不是事实观点是基于事实之上的一种系统性的判断和理解框架,事实是观点的基础观点不一定正确观点组成: 事实 ...
PHP isset()与empty()的使用区别详解(转)
通过对PHP语言的学习,应该知道它是基于函数的一款HTML脚本语言.庞大的函数库支持着PHP语言功能的实现.下面我们为大家介绍有关PHP函数isset()与empty()的相关用法. PHP的 ...
UNIX索引技术访问文件初阶
背景: 软考里面,多次碰到一道题: 过程以前对于这样的题,仅仅知道: 在文件系统中,文件的存储设备通常划分为若干个大小相等的物理块,每块长为512或1024字节.文件的理结构是指文件在存储设备上的存 ...
Hibernate的核心API
Configuration:负责管理Hibernate的配置信息 1.加载核心配置文件核心配置有两种: hibernate.properties 加载:Configuration configura ...
svn代码提交注意事项
先全部add,查看是否有gen和bin,然后再忽略这两个,忽略时选择最后rescury....
CSS3-网站导航，transform，transition
网站导航: 1.a:link visited hover active的顺序是很重要的,如果改变顺序,则hover以及active的状态不起作用 2.<a href=" ...
java基础内容
此文作java语法基础的起始页,负责总结和目录引导想我开始接触java语法也有比较长时间了(大概是2015年十月份),到现在(2016-10-25)为止还未系统的学习总结基础语法,亡羊补牢吧,回过头 ...
R AnalyticFlow---R的流程图
0.简介 R AnalyticFlow是一款利用R环境作为统计计算的数据分析软件,创作者是日本人,版权属于日本Ef-prime公司.R AnalyticFlow除了拥有直观的用户界面和流程图显示,它还 ...

JavaScript笔记——this的取值