es6 函数的扩展
2020-06-26 07:51
162 查看
钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>
代码:
<script> //默認值的用法 /* function log(x, y) { y = y || "word"; console.log(x, y); } log("hello"); */ /* function add(...values) { let sum = 0; for (let val of values) { sum += val; } return sum; } console.log(add(1, 2, 3, 4, 5, 5, 5, 5)); */ /* function foo(n) { return n; } */ //=====> 等價于 let foo = n => n; /* //1個參數的時候 let add = value => value; //2個參數 let add2 = (value1, value2) => value1 + value2; let add3 = (value1, value2) => { value1 += 1; let sum = value1 + value2; return sum * 100; } console.log(add(1), add2(1, 2), add3(1, 2)); */ /* let PageHandle = { id: 123, init: function() { document.addEventListener('click', (event) => { console.log(this); this.doSomeThings(event.type); }, false); //正常的funtion(event){}如果函數沒有bind函数绑定上面的this,this指向,會指到#document,但是箭头函数没有这个问题。 }, doSomeThings: function(type) { console.log(`事件類型:${type},當前id:${this.id}`); } }; PageHandle.init();*/ //箭頭函數不能用new來實例化 //错误示例: let fn = () => 1; let newFn = new fn(); //上面代码报错,报错显示:Uncaught TypeError: fn is not a constructor,面试题。 //箭頭函數沒有this指向問題; </script>
1,箭头函数函数体中 this 的指向是定义时 this 的指向。如代码中
PageHandle.init定义时的this,就是PageHandle这个对象。
箭头函数版:
let PageHandle = { id: 123, init: function() { document.addEventListener('click', (event) => { console.log(this); this.doSomeThings(event.type); }, false); //正常的funtion(event){}如果函數沒有bind函数绑定上面的this,this指向,會指到#document,但是箭头函数没有这个问题。 }, doSomeThings: function(type) { console.log(`事件類型:${type},當前id:${this.id}`); } }; PageHandle.init();
function 版:需要用bind函数绑定定义时的对象,代码如下:
let PageHandle = { id: 123, init: function() { document.addEventListener('click', function (event) { console.log(this); this.doSomeThings(event.type); }.bind(this), false); //正常的funtion(event){}如果函數沒有bind函数绑定上面的this,this指向,會指到#document,但是箭头函数没有这个问题。 }, doSomeThings: function(type) { console.log(`事件類型:${type},當前id:${this.id}`); } }; PageHandle.init();
其他笔记:可能面试会问到的。
//箭頭函數不能用new來實例化 //错误示例: let fn = () => 1; let newFn = new fn(); //上面代码报错,报错显示:Uncaught TypeError: fn is not a constructor,面试题。
相关文章推荐
- ES6系列之---对象的扩展函数
- es6--解构赋值、函数默认值、扩展运算
- ES6基础语法(八) —— 函数扩展
- ES6-函数的扩展-rest参数
- ES6箭头函数与Arr数组的扩展
- ES6-函数的扩展-双冒号运算符
- ES6(七: 函数扩展)(name,箭头,函数绑定,尾调用优化)
- ES6 随记(3.4.1)-- 函数的拓展(参数默认值,扩展运算符)
- Web端 es6(基础六) 函数扩展
- ES6--对象、函数的扩展
- ES6关于函数的扩展知识(ECMAScript 6 入门笔记)
- ES6入门——函数的扩展
- ES6(六: 函数扩展)(默认值,rest参数,扩展运算符)
- ES6-函数的扩展-函数参数的默认值
- 08、ES6 函数扩展
- ES6---扩展运算符和rest‘...’(三点运算符),在数组、函数、set/map等中的应用
- ES6新特性之函数的扩展实例详解
- es6~函数的扩展
- [ES6] 字符串、正则、数值、函数、数组、对象的扩展
- ECMAScript6(ES6)标准之函数扩展特性箭头函数、Rest参数及展开操作符