博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
重学前端学习笔记(十九)--JavaScript中的函数
阅读量:7030 次
发布时间:2019-06-28

本文共 2647 字,大约阅读时间需要 8 分钟。

笔记说明

重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入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* 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(); // globalo.showThis(); // o复制代码

普通函数的 this 值由调用它所使用的引用决定。获取函数的表达式,返回的是一个 Reference 类型。Reference 类型由两部分组成:一个对象和一个属性值。

上面代码里 o.showThis 产生的 Reference 类型,即由对象 o 和属性showThis构成。

调用函数时使用的引用,决定了函数执行时刻的 this 值。

2.2、箭头函数情况下

const showThis = () => {    console.log(this);}var o = {    showThis: showThis}showThis(); // globalo.showThis(); // global复制代码

改为箭头函数后,不论用什么引用来调用它,都不影响它的 this 值。

2.3、方法情况下

// 这一个没怎么弄明白,mark一下class C {    showThis() {        console.log(this);    }}var o = new C();var showThis = o.showThis;showThis(); // undefinedo.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:表示当 thisundefined 时,取全局对象,对应了普通函数。
  • strict:当严格模式时使用,this 严格按照调用时传入的值,可能为 null 或者 undefined
"use strict"function showThis(){    console.log(this);}var o = {    showThis: showThis}showThis(); // undefinedo.showThis(); // o复制代码

四、操作 this 的内置函数

Function.prototype.callFunction.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 3foo.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://juejin.im/post/5cdf05265188252f5e019b4f

你可能感兴趣的文章
HTTP请求返回状态码详解
查看>>
句柄类
查看>>
GitLab
查看>>
【常用配置】Spring框架web.xml通用配置
查看>>
[leetcode 240]Search a 2D Matrix II
查看>>
域名指的是这一级目录
查看>>
[Angular] Creating an Observable Store with Rx
查看>>
[转]Porting to Oracle with Entity Framework NLog
查看>>
chmod更改文件的权限
查看>>
oracle 10g/11g RAC 启停归档模式
查看>>
poj3461 Oulipo
查看>>
OAuth2.0学习(1-12)开源的OAuth2.0项目和比较
查看>>
Gitlab,这也就O了???
查看>>
2014 百度之星 1003 题解 Xor Sum
查看>>
Linux中在主机上实现对备机上文件夹及文件的操作的C代码实现
查看>>
iOS 块的简单理解
查看>>
idea中如何配置git以及在idea中初始化git
查看>>
关于JQuery Class选择器的一点
查看>>
POJ3264 Balanced Lineup
查看>>
redis-cli 连接远程服务器
查看>>