摘要:方法在中定义的函数。这种声明方式会定义一个生成器函数,它返回一个对象。类用定义的类,实际上也是函数。调用函数时使用的引用,决定了函数执行时刻的值。表示当为时,取全局对象,对应了普通函数。四操作的内置函数和可以指定函数调用时传入的值。
笔记说明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:kaimo313@foxmail.com。一、函数 1.1、普通函数
用 function 关键字定义的函数。
function kaimo(){ // code }1.2、箭头函数
用 => 运算符定义的函数。
const kaimo = () => { // code }1.3、方法
在 class 中定义的函数。
class KK { kaimo(){ //code } }1.4、生成器函数
用 function* 定义的函数。这种声明方式会定义一个生成器函数 (generator function),它返回一个 Generator 对象。
function* kaimo(){ // code }1.5、类
用 class 定义的类,实际上也是函数。
class KK { constructor(){ //code } }1.6、异步函数
普通函数、箭头函数和生成器函数加上 async 关键字。
async function kaimo(){ // code } const kaimo = async () => { // code } async function kaimo*(){ // code }二、this关键字
this 是执行上下文中很重要的一个组成部分。同一个函数调用方式不同,得到的 this 值也不2.1、普通函数情况下
function showThis(){ console.log(this); } var o = { showThis: showThis } showThis(); // global o.showThis(); // o
普通函数的 this 值由调用它所使用的引用决定。获取函数的表达式,返回的是一个 Reference 类型。Reference 类型由两部分组成:一个对象和一个属性值。
上面代码里 o.showThis 产生的 Reference 类型,即由对象 o 和属性showThis构成。
调用函数时使用的引用,决定了函数执行时刻的 this 值。
2.2、箭头函数情况下const showThis = () => { console.log(this); } var o = { showThis: showThis } showThis(); // global o.showThis(); // global
改为箭头函数后,不论用什么引用来调用它,都不影响它的 this 值。
2.3、方法情况下// 这一个没怎么弄明白,mark一下 class C { showThis() { console.log(this); } } var o = new C(); var showThis = o.showThis; showThis(); // undefined o.showThis(); // o
首先创建了一个类 C,并且实例化出对象 o,再把 o 的方法赋值给了变量 showThis。
三、this 关键字的机制1、在 JavaScript 标准中,为函数规定了用来保存定义时上下文的私有属性 [[Environment]]。
2、当一个函数执行时,会创建一条新的执行环境记录,记录的外层词法环境(outer lexical environment)会被设置成函数的 [[Environment]]。
/* 执行上下文的切换机制 */ var a = 1; foo(); // 在别处定义了 foo: var b = 2; function foo(){ console.log(b); // 2 console.log(a); // error }
foo 能够访问 b(定义时词法环境),却不能访问 a(执行时的词法环境)
3、JavaScript 用一个 栈 来管理执行上下文,这个栈中的每一项又包含一个链表。
当函数调用时,会入栈一个新的执行上下文,函数调用结束时,执行上下文被出栈。
4、[[thisMode]] 私有属性。
lexical:表示从上下文中找 this,这对应了箭头函数。
global:表示当 this 为 undefined 时,取全局对象,对应了普通函数。
strict:当严格模式时使用,this 严格按照调用时传入的值,可能为 null 或者 undefined。
"use strict" function showThis(){ console.log(this); } var o = { showThis: showThis } showThis(); // undefined o.showThis(); // o四、操作 this 的内置函数
Function.prototype.call 和 Function.prototype.apply 可以指定函数调用时传入的 this 值。
function foo(a, b, c){ console.log(this); console.log(a, b, c); } //call 和 apply 作用一样,只是传参方式有区别 foo.call({}, 1, 2, 3); // {} 1 2 3 foo.apply({}, [1, 2, 3]); // {} 1 2 3
Function.prototype.bind 它可以生成一个绑定过的函数,这个函数的 this 值固定了参数
function foo(a, b, c){ console.log(this); console.log(a, b, c); } foo.bind({}, 1, 2, 3)(); // {} 1 2 3个人总结
脑壳都绕晕了_(:3」∠)_,里面还是有很多不懂的,继续努力。。。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/109609.html
摘要:方法在中定义的函数。这种声明方式会定义一个生成器函数,它返回一个对象。类用定义的类,实际上也是函数。调用函数时使用的引用,决定了函数执行时刻的值。表示当为时,取全局对象,对应了普通函数。四操作的内置函数和可以指定函数调用时传入的值。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要...
摘要:方法在中定义的函数。这种声明方式会定义一个生成器函数,它返回一个对象。类用定义的类,实际上也是函数。调用函数时使用的引用,决定了函数执行时刻的值。表示当为时,取全局对象,对应了普通函数。四操作的内置函数和可以指定函数调用时传入的值。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要...
摘要:一自动插入分号规则三条规则要有换行符,且下一个符号是不符合语法的,那么就尝试插入分号。有换行符,且语法中规定此处不能有换行符,那么就自动插入分号。源代码结束处,不能形成完整的脚本或者模块结构,那么就自动插入分号。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整...
阅读 2919·2021-11-25 09:43
阅读 3275·2021-11-24 09:39
阅读 2796·2021-09-22 15:59
阅读 1903·2021-09-13 10:24
阅读 483·2019-08-29 17:02
阅读 2072·2019-08-29 13:23
阅读 3024·2019-08-29 13:06
阅读 3490·2019-08-29 13:04