x-note
  • Introduction
  • JavaScript
    • JavaScript 作用域链
    • JavaScript 数据结构与类型
    • JavaScript 原型
    • JavaScript this 关键字
    • JavaScript 函数
    • JavaScript delete 运算符
    • JavaScript 内存管理与垃圾回收
    • JavaScript 严格模式与混乱模式
    • JavaScript 数字精度丢失
    • JavaScript 并发模型
    • 利用原型链实现继承
  • ECMAScript
    • ECMAScript 6 变量及常量的声明
    • ECMAScript 6 变量的解构赋值
    • ECMAScript 6 Promise 对象
    • ECMAScript 6 Symbol
    • ECMAScript 6 Proxy
    • ECMAScript 6 Reflect
    • ECMAScript 6 new.target
    • ECMAScript 6 Set 和 WeakSet
    • ECMAScript 6 Map 和 WeakMap
    • ECMAScript 6 Iterator
    • ECMAScript 6 Generator
    • ECMAScript 6 class
    • ECMAScript 7
    • ECMAScript 8 async 函数
    • ECMAScript 8 内存共享与原子性
    • ECMAScript 8 Others
    • ECMAScript 2018
    • ECMAScript 2019
  • CSS
    • CSS 块格式化上下文(BFC)
    • CSS 盒模型
    • CSS 外边距合并
    • CSS Float
    • CSS Position
    • CSS Border-Image
    • CSS BEM
    • CSS 表布局详解
    • 页面布局之单列布局
    • 页面布局之多列布局
  • React
    • React 组件的生命周期
    • React 虚拟 DOM
    • React Reconciliation
    • React Diff 算法核心
    • React Fiber
    • React Scheduling
    • React Context API
    • React Refs
    • React HMR
    • React Hook
  • VUE
    • VUE 响应式系统
    • VUE 渲染机制
    • 关于 Vue 的思考
  • Webpack
    • Webpack 基本概念
    • Webpack HMR
  • Babel
    • @babel/preset-env
  • WEB
    • WEB 基础知识及概念
      • 屏幕测量单位
      • 重绘与重排
      • 前端模块化系统
      • WEB 客户端存储
      • 浏览器的渲染过程
    • WEB 性能优化
      • WEB 性能指标
      • WEB 图片优化
      • 懒加载资源
    • WEB 安全
      • XSS
      • XSRF
      • 点击劫持
      • 同源策略(Same Origin Policy,SOP)
    • WEB 解决方案
      • webp 兼容方案
      • WEB 拖拽实现方案
    • WEB SEO
  • Git
    • Git 工作流
    • Git 内部原理
  • 传输协议
    • UDP
      • UDP 基本概念
    • TCP
      • TCP 基本概念
    • HTTP
      • HTTP 基础
      • HTTP 缓存
      • HTTP-2
      • HTTP-3
      • HTTPS
      • 自定义 HTTPS 证书
  • Protocol Buffers
    • Protocol Buffers 基础
  • gRPC
    • gRPC 简介
    • gRPC 基础概念
    • GRPC with GraphQL and TypeScript
  • 正则表达式
    • 正则表达式基础
    • 正则表达式的悲观回溯
  • 基础算法
    • 冒泡排序
    • 插入排序
    • 选择排序
    • 快速排序
    • 归并排序
    • 希尔排序
    • 堆排序
    • 桶排序
    • 计数排序
    • 基数排序
    • 二叉树的遍历
    • 动态规划
    • 回溯
  • 压缩算法
    • HPACK
    • QPACK
  • 设计模式
    • DDD
      • 模型元素的模式
    • 常见设计模式
      • 工厂方法
      • 抽象工厂
      • 构造器
      • 原型
      • 单例模式
      • 适配器模式
      • 桥接模式
      • 组合模式
      • 外观模式
      • 享元模式
      • 代理模式
      • 责任链模式
      • 命令模式
      • 迭代器模式
      • 中介者模式
      • 备忘录模式
      • 观察者模式
      • 状态模式
      • 策略模式
      • 模版方法模式
      • 访问者模式
      • 依赖注入
    • MVC
    • MVP
    • MVVM
  • 颜色空间
    • LCH
由 GitBook 提供支持
在本页
  • 方法链
  • 补充说明
在GitHub上编辑
  1. JavaScript

JavaScript 函数

JavaScript 函数是参数化的。函数的定义会包括一个形参的标识符列表**(arguments),这些参数在函数体中像局部变量一样工作。函数调用会为形参提供实参的值。函数使用它们实参的值来计算返回值,成为该函数调用表达式的值。每次的函数调用都会拥有本次调用上下文(context)**,即 this 关键字的值。

在 JavaScript 里,函数即对象,程序可以随意操控它们。

JavaScript 可以把函数赋值给变量,或作为参数传递给其他函数(回调函数)。因为函数就是对象,所以可以给它们设置属性,甚至调用它们的方法。

function func() {
    func.method(func.attr);
}
func.attr = 'a';
func.method = function (a) {
    console.log(a);
}

func(); // a

JavaScript 的函数可以嵌套在其他函数中定义,这样它们就可以访问它们被定义时所出的作用域中的任何变量**(闭包)**。

function func() {
    const x = 'can you see me?'
    return function innerFunc() {
        console.log(x);
    }
}

func()(); // can you see me?

如果函数挂载在一个对象上,作为对象的一个属性,就称它为对象的方法。用于初始化一个新建对象的函数成为构造函数(constructor)。

JavaScript 函数调用的四种方式:

  • 作为函数

  • 作为方法

  • 作为构造函数

  • 通过call或者apply方法间接调用

几种方式调用最主要的区别,就是函数内部上下文的区别。

function func(x, y, z) {
    console.log(this, x, y, z);
}

func(1, 2, 3); // window or undefined (取决于是否启用·严格模式·), 1, 2, 3

const obj = {
    func,
}
obj.func(1, 2, 3); // obj, 1, 2, 3

func.call(obj, 1, 2, 3); // obj, 1, 2, 3
func.apply(obj, [1, 2, 3]); // obj, 1, 2, 3

不过,构造函数调用和普通的函数调用以及方法调用在实参处理、调用上下文和返回值方面都有不同。

作为构造函数调用时,会创建一个新的空对象,这个对象继承自构造函数的prototype属性。构造函数会试图初始化这个新创建的对象,并将其作为上下文。

function func() {
    'use strict'
    this.args = [...arguments];
}
func.prototype.a = '123';
const obj = {
    func,
}

const f1 = new func(1);
const f2 = new func; // 作为构造函数调用时,允许没有形参和圆括号
const f3 = new obj.func(1);

console.log(f1.args, f1.a); // [1], '123'
console.log(f2.args, f2.a); // [], '123'
console.log(f3.args, f3.a, obj.args); // [], '123', undefined

方法链

当方法的返回值是一个对象,这个对象还可以在调用它的方法。这种方法调用序列通常称为**“链”或者“级联”**。这个序列中每一次调用的结果都是另一个表达式的组成部分

[1, 2, 3, 4, 5, 6, 7, 8, 9]
    .map(item => item * 3)
    .filter((item) => item > 10); // 常见的方法的链式调用

方法的链式调用和构造函数的链式调用不等价

补充说明

通过bind函数绑定上下文后的函数,无法再次通过bind 函数绑定上下文

function func() {
 console.log(this)
}

const newFunc = func.bind([]).bind({});
newFunc(); // []
上一页JavaScript this 关键字下一页JavaScript delete 运算符

最后更新于7年前