JavaScript学习笔记008-this0arguments0箭头函数
JavaScript学习笔记008-this0arguments0箭头函数
Mr. 柳上原
发布于 2018-09-05 15:20:50
发布于 2018-09-05 15:20:50
文章被收录于专栏：菜鸟前端工程师
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
学习要有始有终
狗熊掰棒子的故事大家都听过
都觉得狗熊很傻
也都觉得自己绝对不会那样做
可往往经常做出那样的事情
自己却还没觉得
就比如编程学习
前端学了一半，突然听说Python很火
马上又去学Python，
然后又听说go语言很火......
无止境的丢了西瓜捡芝麻
一直在不停的学习，却一个都没学好
你与狗熊何其相似！！！
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div class='box'></div>
<script>
// this
function () {
console.log(this);
}
let obj = {
a: fn
}
fn(); // 函数自执行，当函数不依赖于任何对象时，this指向顶层对象
obj.a(); // this指向函数依赖的对象obj
document.onclick = fn; // this指向document
box.onclick = fn; // this指向box
// 函数关键字：arguments（不定参）类数组
function fn() {
console.log(arguments); // 当不确定实参个数的时候使用
console.log(arguments.length); // 实参的个数
console.log(arguments[0]); // 下标定位
}
fn(1, 2, 3, 4);
fn(1);
// rest参数
let fn(a, ...b) { // ...b必须放到最后
console.log(a); // rest可以同时存在形参，a = 1
console.log(b); // b为数组，b = [2, 3, 4] [ ]
}
fn(1, 2, 3, 4);
fn(1);
// 箭头函数
let add1 = function (n) {
return n + 1;
}
add1(5);
let add2 = (n) => n + 1; // 相当于函数内部return一个值
add2(5);
let add3 = function (n) {
let a = n * 2;
let b = a + 2;
return b;
}
add3(5)
let add4 = (n) => {
let a = n * 2;
let b = a + 2;
return b; // 箭头函数复杂写法
}
add4(5);
// 箭头函数的this
let add5 = (n) => {
console.log(this); // 箭头函数没有this，默认指向外层对象
}
// 箭头函数的arguments
let add6 = (n) => {
console.log(arguments); // 箭头函数没有arguments
}
// 严格模式：'use strict'
// 函数的名字
function fn(a, b, c, d, e = 1, ...f) {}
fn(1, 2, 3);
console.log(fn.name); // 函数的名字，fn
console.log(fn.length); // 函数的长度，返回的是形参的个数，默认形参和rest不算，4
// iife 立即执行函数表达式
// 可以把全局变量变成局部变量
// 不会污染全局环境
// iife 函数名字不能调用
// es5：
(function (){
let a = 1;
var b = 1;
})();
// es6：
{
let a = 1;
var b = 1;
}
// 函数表达式和函数声明的区别：函数表达式可以直接加()立即执行
let fn = function () {
console.log('1');
}();
// 第一种写法
(function (){})();
// 第二种写法
(function (){}());
// 第三种写法
!function (){}();
// 第四种写法
~function (){}();
// 第五种写法
+function (){}();
// 第六种写法
-function (){}();
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.08.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
