js函数( 普通函数、箭头函数 ) 内部this的指向
- 普通函数
| 具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window )。
示例:
(function() {
console.log(this); // window
(function() {
console.log(this); // window
(function() {
console.log(this); // window
})()
})()
})()
| 普通函数,均可以通过其 bind、call、apply 方法 来改变其内部 this 的指向。
示例:
(function() {
const func = (function() { console.log(this) }).bind('hello')
const obj = {
func,
func1: (function() { console.log(this) }).bind('hello'),
func2: (function F() { console.log(this) }).bind('hello')
}
func() // String {'hello'}
obj.func() // String {'hello'}
obj.func1() // String {'hello'}
obj.func2() // String {'hello'}
})()
| 当普通函数( 具名的、匿名的、外部定义的方法 ),作为对象的属性值被引用的时候,其内部的 this 指向该属性所直接归属的对象 。
示例:
(function() {
const func = function() { console.log(this) }
const obj = {
func,
func1: function F() { console.log(this) },
func2() { console.log(this) },
param: {
func,
func1: function F() { console.log(this) },
func2() { console.log(this) }
}
}
func() // window
obj.func() // obj
obj.func1() // obj
obj.func2() // obj
obj.param.func() // obj.param
obj.param.func1() // obj.param
obj.param.func2() // obj.param
})()
- 箭头函数
| 箭头函数,不管是作为独立的方法 或是 作为对象的属性值,其内部的 this 均指向 该箭头函数被定义时所在的上下文中对应的 this。
示例:
(function() {
/** 外层作用域 */
const arrowfunc = () => console.log(this) console.log('-- 外层作用域 --');
console.log(this); // String {'hello'}
arrowfunc(); // String {'hello'} (function() {
/** 内层作用域 */
const arrowfunc1 = () => console.log(this) console.log('-- 内层作用域 --');
console.log(this); // String {'world'}
arrowfunc() // String {'hello'}
arrowfunc1() // String {'world'} /** 函数作为对象属性值 */
const obj = {
arrowfunc,
arrowfunc1,
param: {
arrowfunc,
arrowfunc1,
arrowfunc2: () => console.log(this)
}
} console.log('-- 函数作为对象属性值 --');
obj.arrowfunc() // String {'hello'}
obj.arrowfunc1() // String {'world'}
obj.param.arrowfunc() // String {'hello'}
obj.param.arrowfunc1() // String {'world'}
obj.param.arrowfunc2() // String {'world'}
}).bind('world')()
}).bind('hello')()
| 箭头函数 也有 bind、call、apply 方法,与普通函数一样可以通过这三个方法预设箭头函数的入参值。
试图通过这三个方法改变箭头函数内部 this 的指向,虽不会报错但却是无效的。
示例:
(function() {
console.log(this); // String {'hello'}
(() => {
console.log(this); // String {'hello'}
(() => {
console.log(this) // String {'hello'}
}).bind('bbb')()
}).bind('aaa')(); ((a, b, c) => {
console.log(this) // String {'hello'}
console.log(a) // a
console.log(b) // b
console.log(c) // c
}).bind(null, 1, 2)(3)
}).bind('hello')()
| 附:
* 箭头函数不能作为构造函数使用,强制使用 new 运算符作用在箭头函数上,将会报如下错误
new (() => {}) // Uncaught TypeError: (intermediate value) is not a constructor
* 箭头函数内部没有定义 arguments 变量,箭头函数所在的作用域也不存在 arguments 的情况下,应用该变量会报错。
(function() {
((a) => {
console.log(a) // 1
console.log(arguments) // Arguments ['hello']
})(1)
})('hello'); (() => {
console.log(arguments) // Uncaught ReferenceError: arguments is not defined
})();
* 普通函数都有原型属性 prototype,箭头函数没有这个属性。
(function() {}).prototype // {constructor: ƒ}
(() => {}).prototype // undefined
js函数( 普通函数、箭头函数 ) 内部this的指向的更多相关文章
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
- js中this,箭头函数和普通函数
四种基本用法 1. 一般方法中,this代指全局对象 window 2. 作为对象方法调用,this代指当前对象 3. 作为构造函数调用,this 指代new 出的对象 function test() ...
- JS中generater和箭头函数
generater跟函数很像: function* fn(x){ yield x; yield x++; return x;} 如上所示,generater用function*定义,可以用yield返 ...
- JS ES6中的箭头函数(Arrow Functions)使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...
- js中箭头函数 及 针对箭头函数this指向问题引出的单体模式
ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...
- JavaScript的函数申明、函数表达式、箭头函数
JavaScript中的函数可以通过几种方式创建,如下. // 函数声明 function getName() { return 'Michael' } // 函数表达式 const getName ...
- es6 入坑笔记(二)---函数扩展,箭头函数,扩展运算符...
函数扩展 1.函数可以有默认值 function demo( a = 10,b ){} 2.函数可以使用解构 function demo( { a = 0,b = 0 } = {} ){ } 3.函数 ...
- 关于ES6-{块级作用域 let const 解构赋值 数组 字符串 函数的扩展 箭头函数}
关于ES6 块级作用域 任何一对花括号({})中的语句集都属于一个块,在块中声明的变量在代码块外都是不可访问的,称之为块级作用域,ES5以前没有块级作用域 let let 是ES6新增的声明变量的一种 ...
- 函数的扩展——箭头函数this的使用
箭头函数中的this指向的是定义时的this,而不是执行时的的this . 举例: 案例中,我们的obj对象中有一个属性x和一个属性show( )方法,show( )通过this打印出x的值,结果是u ...
- react 中 函数bind 和箭头函数
用bind形式 方便测试,含有this时候最好用bind形 其他情况用箭头函数 含有this的时候也可以用箭头函数
随机推荐
- cookie 案例 记住上一次的访问时间
需求:记住上一次的访问时间 第一次访问Servlet 提示 欢迎首次访问 之后的访问 都提示 您上次的访问时间为:"""""""& ...
- UiPath剪贴板操作的介绍和使用
一.剪切板操作的介绍 模拟用户使用剪切板操作的一种行为: 例如使用设置剪切板(SettoClipboard),从剪切板获取(GetfromClipboard)的操作 二.剪切板相关操作在UiPath中 ...
- Linux操作系统(2):组管理和权限管理
组管理和权限管理 Outline 1.查看文件所有者:ls -ahl 2.更改文件或目录权限命令:chmod 3.更改文件或目录所有者命令:chown 4.更改文件或目录所属组命令:chgrp 1)组 ...
- 【C++】从设计原理来看string类
1.一些C++基础知识 模板类string的设计属于底层,其中运用到了很多C++的编程技巧,比如模板.迭代器.友元.函数和运算符重载.内联等等,为了便于后续理解string类,这里先对涉及到的概念做个 ...
- 我们应该测试 DAO 层吗?
应该测试 DAO 层吗? 网上有很多人讨论单元测试是否应该包含 DAO 层的测试.笔者觉得,对于一些主要是crud的业务来说,service层和controller层都会非常薄,而主要的逻辑都落在ma ...
- SpringBoot数据库管理 - 用flyway对数据库管理和迁移
上文介绍了Liquibase,以及和SpringBoot的集成.除了Liquibase之外,还有一个组件Flyway也是经常被使用到的类似的数据库版本管理中间件.本文主要介绍Flyway, 以及Spr ...
- Hbase学习(三)过滤器 java API
Hbase学习(三)过滤器 HBase 的基本 API,包括增.删.改.查等. 增.删都是相对简单的操作,与传统的 RDBMS 相比,这里的查询操作略显苍白,只能根据特性的行键进行查询(Get)或者根 ...
- 【每天学一点-02】创建Node.js的第一个应用
1.引入require模块,使用createServer()创建服务器 [server.js]文件 var http = require('http'); http.createServer(func ...
- 递归概念&分类&注意事项和使用递归计算1-n之间的和
递归 概述 递归:指在当前方法内调用自己的这种现象. 递归的分类: 递归分为两种,直接递归和间接递归 直接递归称为方法自身调用自己 简介递归可以A方法调用B方法,B方法调用C方法,C方法调用A方法 注 ...
- pathlib相关操作
简介 python中操作文件或者文件夹的模块目前我知道的有四个,分别为os.shutil.pathlib.glob,在了解到pathlib之前,我一直使用的是os进行相关路径的操作,但在使用了path ...