IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript复习笔记 (二)函数 -> 正文阅读

[JavaScript知识库]JavaScript复习笔记 (二)函数

一、定义

  1. function abs(x){}
    如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined
  2. var abs = function (x) {};
    注意第二种方式按照完整语法需要在函数体末尾加一个" ; ",表示赋值语句结束

由于JavaScript的函数也是一个对象
上述定义的abs()函数实际上是一个函数对象,而函数名abs可以视为指向该函数的变量 (1,2完全等价)

调用:JavaScript允许传入任意个参数而不影响调用

二、 关键字arguments

关键字arguments只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。
arguments类似Array但它不是一个Array

function foo(x) {
    console.log('x = ' + x); // 10
    for (var i=0; i<arguments.length; i++) {
        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
    }
}
foo(10, 20, 30);

arguments最常用于判断传入参数的个数

三、rest参数(ES6新增)

function foo(a, b, ...rest){}

传入的参数先绑定a、b,多余的参数以数组形式交给变量rest
所以,不再需要arguments我们就获取了全部参数。

四、变量提升

函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部
【 JavaScript引擎自动提升变量的声明,但不会提升变量的赋值 】

(由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则)

五、作用域

  1. 全局作用域
    JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性 (顶层函数的定义也被视为一个全局变量)

    任何变量(函数也视为变量),如果没有在当前函数作用域中找到,就会继续往上查找,最后如果在全局作用域中也没有找到,则报ReferenceError错误

名字空间:
减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。
许多著名的JavaScript库都是这么干的:jQuery,YUI,underscore等等。

  1. 局部作用域
    为了解决块级作用域,ES6引入了新的关键字let,用let替代var可以申明一个块级作用域的变量

    引入了新的关键字const定义常量,const与let都具有块级作用域

六、解构赋值 (ES6新增)

  1. 同时对一组变量进行赋值
    var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
    let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];

    // 忽略前两个元素,只对z赋值第三个元素
    let [, , z] = ['hello', 'JavaScript', 'ES6'];

  2. //从对象中取出若干属性 (分别被赋值为person中对应变量名的属性):
    var {name, age, passport} = person;
    //嵌套取值
    var {name, address: {city, zipcode}} = person;
    //要使变量名和属性名不一致
    // 把passport属性赋值给变量id:
    let {name, passport:id} = person;

    (如果对应的属性不存在,变量将被赋值为undefined)

  3. //使用默认值
    // 如果person对象没有single属性,默认赋值为true:
    var {name, single=true} = person;

  4. 语法错误:

    // 声明变量:
    var x, y;
    // 解构赋值:
    {x, y} = { name: '小明', x: 100, y: 200};
    // 语法错误: Uncaught SyntaxError: Unexpected token =
    

    这是因为JavaScript引擎把{开头的语句当作了块处理,于是=不再合法。解决方法是用小括号括起来:

    ({x, y} = { name: '小明', x: 100, y: 200});
    

七、this

在一个方法内部,this始终指向当前对象
=> 要保证this指向正确,必须用obj.xxx()的形式调用。单独调用函数,this指向全局对象。
=> ECMA决定,在strict模式下让函数的this指向undefined (在非strict模式下,指向全局对象window)

1?? 解决方法:
var that = this; 首先捕获this,就可以放心地在方法内部定义其他函数,而不是把所有语句都堆到一个方法中。

2?? 控制this指向:

  1. apply
    要指定函数的this指向哪个对象,可以用函数本身的apply方法。
    它接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。
    getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空
  2. call
    另一个与apply()类似的方法是call(),唯一区别是:
    apply()把参数打包成Array再传入;
    call()把参数按顺序传入。

对普通函数调用,我们通常把this绑定为null
Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

3?? 装饰器:
利用apply(),还可以动态改变函数的行为
// 修改默认函数:

var count = 0;
var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 调用原函数
};

八、闭包

高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回

1?? 结构体:

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}

在函数lazy_sum中又定义了函数sum:
内部函数sum可以引用外部函数lazy_sum的参数和局部变量,当lazy_sum返回函数sum时,相关参数和变量都保存在返回的函数中。

  • 每次调用都会返回一个新的函数,调用结果互不影响
  • 当函数返回了一个函数后,其内部的局部变量(arr) 还被新函数引用

2?? 返回的函数并不会立刻执行,而是直到调用了f()才执行

//返回函数引用循环变量:返回函数结果都相同-变量相同
function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}
  • 一定要引用循环变量:
    再创建一个函数,用该函数的参数绑定循环变量当前的值
function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

3?? 这里用了一个“创建一个匿名函数并立刻执行”的语法

(function (x) {
    return x * x;
})(3); // 9
  • 由于JavaScript语法解析的问题,会报SyntaxError错误,因此需要用括号把整个函数定义括起来
    (function (x) { return x * x }) (3);

4?? 功能

  1. 闭包就是携带状态的函数,并且它的状态可以完全对外隐藏起来

应用:封装一个私有变量

//用JavaScript创建一个计数器
function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13
  1. 把多参数的函数变成单参数的函数
//利用闭包创建新的函数pow2和pow3
function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}
// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(5)); // 25
console.log(pow3(7)); // 343

九、箭头函数(ES6新增)

1?? 箭头函数相当于匿名函数,并且简化了函数定义。

function (x) {
    return x * x;
}

简化为
x => x * x

  • 多条语句,就不能省略{ … }和return
  • 参数不是一个,就需要用括号()括起来
// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}
  • 返回一个对象
x => { foo: x } // SyntaxError:
x => ({ foo: x }) // ok: 函数体的{ ... }有语法冲突

2?? 箭头函数和匿名函数有个明显的区别:
箭头函数内部的this是词法作用域,由上下文确定。

=> 如果使用箭头函数 var that = this;就不再需要了

  • 由于this在箭头函数中已经按照词法作用域绑定了,所以,
    用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略

十、generator(生成器)(ES6新增)

generator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但可以返回多次。
generator由function*定义,除了return语句,还可以用yield返回多次。

用generator改写斐波那契数列函数

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}

1?? 调用generator对象有两个方法

  1. 不断地调用next()
var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}

next()方法会执行generator的代码,然后,每次遇到yield x;就返回一个对象{value: x, done: true/false},然后“暂停”。

返回的value就是yield的返回值,done表示这个generator是否已经执行结束了。如果done为true,则value就是return的返回值。

当执行到done为true时,这个generator对象就已经全部执行完毕,不要再继续调用next()了。

  1. 直接用for … of循环迭代generator对象
for (var x of fib(10)) {
    console.log(x); // 依次输出0, 1, 1, 2, 3, ...
}

2?? 应用

  1. 保存状态
    因为generator可以在执行过程中多次返回,所以它看上去就像一个可以记住执行状态的函数。
    利用这一点,写一个generator就可以实现需要用面向对象才能实现的功能。
  2. 把异步回调代码变成“同步”代码

3?? 练习

生成一个自增的ID,用generator保存状态

function* next_id() {
for(let n=1;;n++){
    yield n;
}
}
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-01 15:07:38  更:2022-06-01 15:11:05 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 17:06:18-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码