this到底指向什么地方,决定于函数的调用方式。

1、 指向全局变量 --- 函数被单独调用的时候

function fn() {
console.log( this.a );
}
var a = 2;
fn(); //2 fn单独调用,this引用window

2、 指向某对象 --- 隐式绑定
  隐式调用的意思是,函数调用时拥有一个上下文对象

function fn() {
console.log( this.a );
}
var obj = {
a: 2,
fn: fn
};
obj.fn(); //2 this引用obj。 //说明的一点是,最后一个调用该函数的对象是传到函数的上下文对象。如:
function fn() {
console.log( this.a );
}
var obj2 = {
a: 42,
fn: fn
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.fn(); //42 this引用的是obj2. //还有一点要说明的是,失去隐式绑定的情况,如下:
function fn() {
console.log( this.a );
}
var obj = {
a: 2,
fn: fn
};
var bar = obj.fn; // 函数引用传递
var a = "全局"; // 定义全局变量
bar(); // "全局"

  如上,虽然有隐式绑定,但是它执行的效果明显是把fn赋给bar。这样bar执行的时候,依然是函数单独调用,指向全局变量,所以输出结果如上。

3、 指向某对象 --- 显示绑定
  通过call()、apply()、bind()。它们接收的第一个参数即是上下文对象,并将其赋给this。

function fn() {
console.log( this.a );
}
var obj = {
a: 2
};
fn.call( obj ); //

  如果我们传递第一个值为简单值,那么后台会自动转换为对应的封装对象。如果传递为null,那么结果就是在绑定默认全局变量。

4、 指向类实例
  如果是一个构造函数,用new来调用,那么this指向新创建的对象。

function fn(a) {
this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );//

JS进阶之---this的指向的更多相关文章

  1. JS 进阶知识点及常考面试题

    将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数 涉及 ...

  2. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  3. 【 D3.js 进阶系列 】 进阶总结

    进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...

  4. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

  5. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  6. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  7. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  8. Node.js进阶篇-koa、钩子函数、websocket、嵌入式开发

    代码地址如下:http://www.demodashi.com/demo/12932.html 一.简介     koa是由Express原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的We ...

  9. 【 D3.js 进阶系列 — 4.0 】 绘制箭头

    转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...

随机推荐

  1. C#基础知识回顾-- 属性与字段

    今天在公交车上,突然想属性和字段到底有什么区别?很多字段属性都存在 get{}和set{} 和普通的变量没什么区别(可读可写) 我就感觉属性就是给字段一个多的选择方式,有的字段是不允许更改的.. 刚写 ...

  2. 通向全栈之路(6)—无密码ssh连接

    (1)在用户目录下新增一个 .ssh文件 mkdir .ssh (2)生成公钥.私钥 ssh-keygen -t rsa -b 4096 -C "mail@xxx.com" (3) ...

  3. Hive原理总结(完整版)

    目录 课程大纲(HIVE增强) 3 1. Hive基本概念 4 1.1 Hive简介 4 1.1.1 什么是Hive 4 1.1.2 为什么使用Hive 4 1.1.3 Hive的特点 4 1.2 H ...

  4. [PHP] 算法-快速排序的PHP实现

    快速排序: 1.基于二分的思想 2.第一个作为基准数,左右各一个指针,同时扫描,右边先走,找到比基准数小的停下 左边再走,找到比基准数大的停下,左右交换 3.当左右相遇的时候,把当前的和基准数调换,递 ...

  5. 【23】备忘录模式(Memento Pattern)

    一.引言 在上一篇博文分享了访问者模式,访问者模式的实现是把作用于某种数据结构上的操作封装到访问者中,使得操作和数据结构隔离.而今天要介绍的备忘者模式与命令模式有点相似,不同的是,命令模式保存的是发起 ...

  6. Python 练习:简单的购物车(二)

    优化了上一个购物车程序:http://www.cnblogs.com/klvchen/p/8577269.html #输入工资salary = input("Please input you ...

  7. css iphonex适配

    /*  iphonex适配 */ @media only screen and (device-width:375px) and (-webkit-device-pixel-ratio: 3) { . ...

  8. SSM 开发 Tars

    目录结构 tars生成的文件当成 controller 来调用 service ,service 调用 mapper POM 注意如果 mybatis是3.4.1 spring 是4.1.14的话, ...

  9. @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") 前台request 获取body的格式是正确的 (2018-03-23 16:44:22) 但是Java 后台却格式化成了yyyy-MM-dd的格式 巨坑(@InitBinder搞得贵)

    最近做项目时,同事写的功能总是格式化时间不正确,Java类属性明明注解了@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")  但就是硬 ...

  10. 利用搜狐新闻语料库训练100维的word2vec——使用python中的gensim模块

    关于word2vec的原理知识参考文章https://www.cnblogs.com/Micang/p/10235783.html 语料数据来自搜狐新闻2012年6月—7月期间国内,国际,体育,社会, ...