js this小记

在JavaScript中,this 对象是在函数被调用时动态定义的.

JS中有三种方法来设置this对象:

  1. someThing.someFunction(arg1, arg2, argN)
  2. someFunction.call(someThing, arg1, arg2, argN)
  3. someFunction.apply(someThing, [arg1, arg2, argN])

上面几个例子中, this 都是 someThing, 调用没有前导父对象的函数通常会得到全局对象,

在大多数浏览器中这个对象意味着窗口对象。

因此, 下面的代码会打印出两个window:

function a(){
    console.log(this, ‘是a的this‘)
    function b(){
        console.log(this, ‘是b的this‘)
    }
    b()
}
a()
// window,是a的this
// window,是b的this

故下面的代码会打印 c 和 window:

var c = {a: a}
function a(){
    console.log(this, ‘是a的this‘)
    function b(){
        console.log(this, ‘是b的this‘)
    }
    b()
}
c.a()
// c, 是a的this
// window, 是b的this

使用es6的箭头函数可避免无前导父对象的函数被调用时 this 指向 window 的问题,

它会将 this 设置为箭头函数被定义时所处的函数体的宿主对象, 下面会打印 c 和 c:

var c = {a: a}
function a(){
    console.log(this, ‘是a的this‘)
    var b = ()=>console.log(this)
    b()
}
c.a()
// c, 是a的this
// c, 是b的this

关于更进一步理解es6的箭头函数的 this, 这篇博客写的不错可以看看:

http://blog.csdn.net/u013344815/article/details/73184928#insertcode

原文地址:https://www.cnblogs.com/skura23/p/8409980.html

时间: 2024-08-30 18:19:21

js this小记的相关文章

js正则小记

正则表达式 创建方法:1.字面量方法(比较方便常用): 2.RegExp构造函数(用于正则表达式必须在运行时动态生成的情形,写法注意:需要双写反斜杠转义及对引号转义) var reg = /^\d+$/i; var reg = new RegExp("^\d+", "i"); 指定标志字符串:'i'==不区分大小写  'g'==全局匹配 'm'==多行匹配 结构:一个选择可以有多个序列 (/a|b/) 一个序列可以有多个因子   选择->序列->因子 符

exif.js 用法小记

一.API 方法 名称 说明 EXIF.getData(img, callback) 获取图像的数据 能兼容尚未支持提供 EXIF 数据的浏览器获取到元数据. EXIF.getTag(img, tag) 获取图像的某个数据 EXIF.getAllTags(img) 获取图像的全部数据,值以对象的方式返回 EXIF.pretty(img) 获取图像的全部数据,值以字符串的方式返回 二.EXIF标识 名称 说明 ExifVersion Exif 版本 FlashPixVersion FlashPix

js undefined 小记

今天看jquery发现其框架参数传递很有意思(1.4.0以上版本) (function( window, undefined ) {     //中间代码 })(window); 很明显执行的时候传入的参数少一个,查了资料原来是为了屏蔽老浏览器(据说IE5之前)undefined被用户重定义,于是我试了下       var undefined = "hello world";       var a;       if (a == undefined){         consol

js基础小记

三 作用域链 1 function内定义的变量是局部变量,是作用域链的里层.作用域链是由内向外查找的,找到则停止搜索 2 没有自己的块级作用域(指的是由花括号封闭的代码块),如if  for语句 3 不加关键字var 声明的变量是全局变量,当使用var关键字声明变量时,这个变量将被添加到最近的作用域中. 3.  结合构造函数和原型模式 prototype属性 通俗的理解是它可以让所有对象的实例共享它所包含的属性和方法. 构造函数用于定义实例属性,原型模式用于定义共享属性和方法. 区别  基本类型

js事件小记

参考javascript编程全解  javascript高级程序设计 对事件的处理方式称为事件处理程序或事件侦听器 ,对于一个元素或事件,只能设定1个事件处理程序,却可以同时设定多个事件监听器 1)设定为HTML元素的属性 <!DOCTYPE html> <meta charset="UTF-8" /> <head></head> <body> <a href="http://www.baidu.com&quo

event 对象 小记

event对象的属性提供了有关事件的细节并且通过event对象的方法,可以控制事件的继续传播和阻止事件的默认行为 2级DOM Events 标准定义了一个标准的事件模型  被除了IE外的所有现代浏览器实现     在标准事件模型中event对象传递给事件句柄函数,在处理事件的时候获取事件发生的一些属性和控制事件的一些行为(冒泡和默认行为)   在标准事件模型中,Event的各种子接口定义了额外的属性,也就是可以定义多种种类的event对象  而IE只有一种event对象 应用于所有的事件处理 2

拖放 js

之前被小伙伴问自己能不能写一个简单的原生的 我稍微犹豫了下  这次重新学习下拖拽的过程  分享下  参考 JavaScript高级程序设计 必要的准备 自定义事件(实现事件模型)  简单来说事件模型就是观察者模式的一种使用,主体负责发布和管理事件,观察者通过订阅特定的事件类型来观察主体发布的事件,举个例子你有一个按钮,它触发click事件就是在发布事件,事件处理程序就是观察者 function EventTarget(){ this.handlers = {}; } EventTarget.pr

js小记 function 的 length 属性

原文:js小记 function 的 length 属性 [1,2,3].length  可以得到 3, "123".length  也可以得到 3,这个略懂js的都知道. 但是  eval.length,RegExp.length,"".toString.length,1..toString.length  会得到什么呢? 分别得到 1,2,0,1,这些数字代表什么呢? 这个是群里很多新人朋友一直问的一个问题,其实函数的 length 得到的是形参个数.可以参见这

js 正则学习小记之匹配字符串优化篇

昨天在<js 正则学习小记之匹配字符串>谈到 /"(?:\\.|[^"])*"/ 是个不错的表达式,因为可以满足我们的要求,所以这个表达式可用,但不一定是最好的.从性能上来说,他非常糟糕,为什么这么说呢,因为 传统型NFA引擎 遇到分支是从左往右匹配的,所以它会用 \\. 去匹配每一个字符,发现不对后才用 [^"] 去匹配.比如这样一个字符串: "123456\'78\"90"共 16 个字符,除了第一个 " 直接