call()/apply()/bind()的用法

Function.prototype.bind(obj) :将函数内的this绑定为obj, 并将函数返回

function foo() {

  console.log(this) // this指向window

}

foo()
let obj = {userName: 'huang'}

  function foo() {

    console.log(this) // this指向obj

    console.log(this.userName) // huang

  }

  foo.call(obj)
let obj = {userName: 'huang'}

  function foo() {

    console.log(this) // this指向obj

    console.log(this.userName) // huang

  }

  foo.apply(obj)
  let obj = {userName: 'huang'}

  function foo( ) {

    console.log(this) // this指向obj

    console.log(this.userName) // huang

    console.log(data)

  }

  foo.apply(obj, [33]) //apply传参数要用数组,第二个参数必须是数组

  foo.call(obj, 33) // 直接从第二个参数开始依次传入
let obj = {userName: 'huang'}

  function foo() {

    console.log(this) // this指向obj

    console.log(this.userName) // huang

  }

  var bar = foo.bind(obj) //绑定完this不会立刻调用当前的函数，而是将函数返回

  bar()
let obj = {userName: 'huang'}

  function foo(data) {

    console.log(this) // this指向obj

    console.log(this.userName) // huang

    console.log(data)

  }

  var bar = foo.bind(obj, 33) //绑定完this不会立刻调用当前的函数，而是将函数返回

  bar()

区别bind()与call()和apply(): 都能指定函数中的this，call()/apply()是立即调用函数，bind()是将函数返回

bind()一般在回调函数中使用，在回调函数中将this指向某个对象，然后进行操作（拿对象的属性进行对比，赋值等操作）

箭头函数的用法

箭头函数的作用是定义匿名函数，使用场景: 多用来定义回调函数

ES6 允许使用“箭头”（=>）定义函数，如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

当箭头函数没有参数的时候的写法

//箭头函数不需要参数

var f = () => 5;

// var f = function () {

//     return 5

// };

console.log(f())  //

当箭头函数只有一个参数的时候的写法

//当函数只需要一个参数的时候的写法

var f = v => v;

// var f = function(v) {

//     return v;

// };

console.log(f('333'))  //

当箭头函数有多个参数的时候的写法

//当箭头函数需要多个参数

var sum = (num1, num2) => num1 + num2;

// var sum = function(num1, num2) {

//     return num1 + num2;

// };

console.log(sum(3,8))  //

函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回

//如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回，每个函数都会有返回值，如果没有写默认就是undefined

var sum = (num1, num2) => {

    num1 = num1*2;

    num2 = num2*3;

    return num1 + num2;

}

console.log(sum(1,2))  //
//由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

var getTempItem = (id,name)=> ({ id: id, name: name });

console.log(getTempItem(3,'huangjianfng'));//{ id: 3, name: 'huangjianfng' }

箭头函数的特点
简洁，箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
一个正常的函数是谁调用他，this代表的是谁，而箭头函数正好相反。this对象的指向是可变的，但是在箭头函数中，它是固定的。

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

<body>

    <button id="btn1">测试箭头函数this_1</button>

    <button id="btn2">测试箭头函数this_2</button>

<script type="text/javascript">

    let btn1 = document.getElementById('btn1')

    let btn2 = document.getElementById('btn2')

    btn1.onclick = function () {

        alert(this.innerHTML) //this就是btn1

    }

    btn2.onclick = () => {

        alert(this) // this是window，因为btn2是定义在全局下的

    }

</script>

</body>

扩展理解： 箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。

<body>

    <button id="btn1">测试箭头函数this_1</button>

    <button id="btn2">测试箭头函数this_2</button>

<script type="text/javascript">

    let btn1 = document.getElementById('btn1')

    let btn2 = document.getElementById('btn2')

    btn1.onclick = function () {

        alert(this.innerHTML) //this就是btn1

    }

    let obj = {

        name: '箭头函数',

        getName(){

            btn2.onclick = () => {

                console.log(this) // this是obj

            }

        }

    }

    obj.getName()

</script>

</body>
<body>

    <button id="btn1">测试箭头函数this_1</button>

    <button id="btn2">测试箭头函数this_2</button>

<script type="text/javascript">

    let btn1 = document.getElementById('btn1')

    let btn2 = document.getElementById('btn2')

    btn1.onclick = function () {

        alert(this.innerHTML) //this就是btn1

    }

    let obj = {

        name: '箭头函数',

        getName: () => {

            btn2.onclick = () => {

                console.log(this) // this是window

            }

        }

    }

    obj.getName()

</script>
var id = 21;

    function foo() {

        setTimeout(() => {

            console.log(this);// 这时候this是window，因为foo方法在全局调用，foo方法的this是window

        }, 100);

    }

    foo(); //
function foo() {

    setTimeout(() => {

        console.log(this.id);  //42，因为foo的this绑定到了id为42的这个对象中，所以this就是这个对象

    }, 100);

}

var id = 21;

foo.call({ id: 42 });

rest 参数与箭头函数结合

const numbers = (...nums) => {

    var i = 0;

    for(var val of nums){

        i += val;

    }

    return i

};

console.log(numbers(1, 2, 3, 4, 5))  //15
const numbers = (a,...nums) => {

    var i = a;

    for(var val of nums){

        i += val;

    }

    return i

};

console.log(numbers(100,1, 2, 3, 4, 5))  //115

使用箭头函数数组排序

var arr = [2,6,1,7,3];

// arr.sort(function (a,b) {

//     return a-b;

// })

// console.log(arr)

arr.sort(( a, b ) => a - b );

console.log(arr)   //[ 1, 2, 3, 6, 7 ]

rest 参数

在rest参数之前，有个arguments对象，可以获取到函数的参数

function sum() {

    var args = arguments; //arguments是个伪数组，不能使用一般数组的方法

    var res = 0;

    for (var i = 0;i < args.length;i++){

        res += args[i];

    }

    return res;

}

console.log(sum(1,2,3,4,5));  //15

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {   // add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数

    let sum = 0;

    for (var val of values) {

        sum += val;

    }

    return sum;

}

console.log(add(2, 5, 3));   // 10

函数的参数可以很多个，但是rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错，在rest参数之前可以有很多个

function add(a,...values) {   // add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数

    let sum = a;

    for (var val of values) {

        sum += val;

    }

    return sum;

}

console.log(add(10,2, 5, 3));   // 20,第一个参数10代表的是参数a，后面三个参数代表的是rest参数（...values）

扩展运算符

let arr1 = [1,3,5];

let arr2 = [2,...arr1,6]; // 将arr1插入到arr2的数组中间

console.log(...arr2) // 自动遍历

为函数参数指定默认值

function log(x, y) {

    y = y || 'World';

    console.log(x, y);

}

log('Hello') // Hello World

log('Hello', 'China') // Hello China

//这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用,参数y等于空字符，结果被改为默认值

log('Hello', '') // Hello World

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面，使用这种写法更好

function log(x, y = 'World') {

    console.log(x, y);

}

console.log('Hello') // Hello World

console.log('Hello', 'China') // Hello China

console.log('Hello', '') // Hello

参数变量是默认声明的，所以不能用let或const再次声明

function foo(x = 5) {

    //参数变量x是默认声明的，在函数体中，不能用let或const再次声明，否则会报错

    let x = 1; // error

    const x = 2; // error

}

使用参数默认值时，函数不能有同名参数

// SyntaxError: Duplicate parameter name not allowed in this context

function foo(x, x, y = 1) {

    console.log(x,y)

}

参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的

let x = 99;

function foo(p = x + 1) {

    console.log(p);

}

foo() //

foo() //

x = 100;

foo() //

ES5-ES6-ES7_函数的扩展的更多相关文章

  1. ES6入门——函数的扩展

    1.函数参数的默认值 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法.现在ES6可以为函数的参数添加默认值,简洁了许多. ES5 function show(a,b){ b = b ...

  2. ES6中函数的扩展

    一.设置默认参数 ES6之前,给函数设置默认参数是这样做的: function fn(a) { if(typeof y === undefined){ a = a || 'hello'; } cons ...

  3. 【ES6】函数的扩展

    1.函数参数默认值[详情例子参照ESMAScript 6入门 (阮一峰)] 允许为函数的参数设置默认值,即直接写在参数定义的后面.[例子1] 参数变量是默认声明的,所以不能用let或const再次声明 ...

  4. ES6 之 函数的扩展 尾调用以及尾递归

    函数参数的默认值 function log(x, y) { y = y || 'world' console.log(x + ' ' + y); } log('hello') // hello wor ...

  5. es6（三）：es6中函数的扩展（参数默认值、rest参数、箭头函数）

    1.函数可以设置参数默认值 function test1(x,y=1){ console.log(x,y) } test1(10)//10 1 2.rest参数:形式为...变量名 function ...

  6. ES6中对函数的扩展

    ES6一路扩展,字符串.数组.数值.对象无一“幸免”,ES6说要雨露均沾,函数也不能落下,今天,就来讲解ES6对函数的扩展. 参数的默认值 在开发中,给函数的参数指定默认值,是很普遍很常见的一个需求, ...

  7. ES6 - Note3：数组、对象与函数的扩展

    一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,leng ...

  8. ES6 入门系列 - 函数的扩展

    1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...

  9. ES6入门之函数的扩展

    函数js原有的: 属性:arguments[].caller(调用该函数的引用,注意与callee分别开,callee指的是调用函数本身经常在递归中出现).length(形参个数).prototype ...

  10. ES6的新特性（7）——函数的扩展

    函数的扩展 函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console ...

随机推荐

  1. 建立多页面vue.js项目

    介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...

  2. C# Redis安装 使用教程

    前言:lz自打工作以来第一次遇到电脑问题需要重装系统,全盘格式化.打击是沉痛的.特别伤.  然后需要重新在本地部署 redis.这是写这篇博客的原因.希望对大家有所帮助,安装资源和引用DLL可以引用 ...

  3. .NET 配置文件实用指南

    我想大家对配置文件一定不会陌生,在大部分的项目中都会用到它,在此笔者给出一些配置文件的实用示例. XML配置文件 利用XML格式的配置文件储存连接字符串,再用反射技术读取. using System. ...

  4. 从零开始学安全(二十六)●利用Nmap目标的本版进行探测

    通过对对方电脑的服务探测 对本版较低的服务 或者无补丁的服务 可以直入侵 版本探测 version  后边就是版本

  5. js如何发送wss协议的请求，以及接受服务器返回的数据

    今天遇到问题,以往都是请求http协议的url,现在请求变成了wss的,用以前那种ajax的方式不可以发送和接受.然后查阅相关资料解决了这个问题,在这记录一下解决办法,使用的是websocket. & ...

  6. python基础学习（十三）函数进阶

    目录 1. 函数参数和返回值的作用 1.1 无参数,无返回值 1.2 无参数,有返回值 1.3 有参数,无返回值 1.4 有参数,有返回值 2. 函数的返回值进阶 例子:显示当前的湿度和温度 例子:交 ...

  7. HDU1255(KB7-O)

    覆盖的面积 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  8. CSS背景和CSS列表

    ------------------------------ div{            background: red;            width: 300px;            ...

  9. 学linux,从Ubuntu开始

    1.安装过程出现0x00000000指令引用的0x00000000内存该内存不能为written 如果你安装的是inux系统 需要在设置-->系统--> 处理器--启用PAE支持我的就是这 ...

  10. cf438E. The Child and Binary Tree(生成函数 多项式开根 多项式求逆)

    题意 链接 Sol 生成函数博大精深Orz 我们设\(f(i)\)表示权值为\(i\)的二叉树数量,转移的时候可以枚举一下根节点 \(f(n) = \sum_{w \in C_1 \dots C_n} ...