this关键字
在不同的位置代表不同的含义。在全局中this默认代表window,在局部中的普通函数和自调用函数、定时器函数中也代表window,在事件函数中代表事件源标签,在对象中啧代表当前对象。普通函数,大多都属于window的方法,所以普通函数调用就是调用window的方法;事件的绑定,其实就是在给标签对象添加方法,最终调用,其实也是在调用标签对象的方法;定时器属于window的方法,所以定时器的调用其实就是在调用window的方法。根据最终的调用方式,决定最终将函数当做了什么来调用的,才能决定this关键字的含义。
function fn() {
console.log(this)
}
// 将fn当做事件处理函数
btn.onclick = fn
// 此时fn中的this就代表事件源btn
// 将fn当做定时器的处理函数
setTimeout(fn, 1000)
// 此时fn中的this就代表window
// 将fn当做对象的方法
var obj = {
name: '张三',
age: 12,
eat: fn
}
obj.eat()
// 此时fn中的this就代表对象obj
this含义的改变
call,调用函数以及改变函数中的this函数.call
fn.call()
fn.call(document)
function fn(a, b) {
console.log(a + b);
console.log(this);
}
fn.call(document, 1, 2)
参数处理
如果被调用的函数需要实参时,call方法从第二个参数开始给函数传递实参 给call传递第一个参数为null,就表示将函数中的this改为了window.function fn(a, b) {
var c = a + b
console.log(c)
console.log(this)
}
fn(1, 2) // 3 window
fn.call(document, 2, 3) // document 5
fn.call(null, 5, 6) // window 11
伪数组/类数组
为一个对象,对象中要有length属性,如果length不为0,那么这个对象中必须有下标和对应的数据。伪数组转为数组的方法:将伪数组进行遍历后放入到数组中。
var farr = {
0:123;
length:1;
}
apply方法
和call的用法相同,区别在于apply是传递实参,apply给函数传递实参,是将所有实参组成一个数组作为apply的第二个参数传递的function fn(a, b) {
var c = a + b
console.log(c)
console.log(this)
}
fn(1, 2) // 3 window
fn.apply(document, [2, 3]) // document 5
bind方法
bind方法有两个作用:复制函数,并改变新函数中的this。function fn() {
console.log(this)
}
var newFn = fn.bind()
console.log(newFn)
console.log(fn)
console.log(newFn === fn) // false
改变新韩淑的this
函数.bind(新的this含义) // 返回的新函数中,this的含义会变成新的含义function fn() {
console.log(this)
}
var newFn = fn.bind(document)
fn() // window
newFn() // document
bind不加参数,新函数的this为window:
var obj = {
name: '张三',
eat: function() {
console.log(this);
}
}
var fn = obj.eat.bind()
fn() // window
ES6
es6是ECMAScript的第6个版本,在2015年发布。也有的人将ECMAScript5之后版本,统称为es6.ES6中的变量,使用方法和var一样。 let:1.定义变量不能预解析
console.log(a);
var a = 10 输出结构为10
console.log(a);
let a = 10 输出会保错
2.let在if或for的大括号中定义,只能在这个大括号中使用了,将大括号当做是一个作用域,let天生就会自带作用域,无形的 - 块级作用域
if (true) {
var a = 10
}
console.log(a);
if (true) {
let a = 10
}
console.log(a);
3.不允许重复定义一个变量
let a = 1
let a = 2
console.log(a); 会出现a已经被定义过的报错
const:1.const定义变量必须给赋值
let a
a = 10
console.log(a);
2.const变量的值不能改 - 常量
let a = 10
a = 20
console.log(a);
const a = 10
a = 20
console.log(a);
箭头函数
用来简写函数。1.箭头函数中的this比较混轮,所以在函数和方法中使用到this的时候,就不要用箭头函数
2.箭头函数中没有arguments
let fn = function(){
console.log(111);
}
let fn = ()=>{console.log(111);} (箭头函数简写后)
函数默认值
es6中可以定义函数默认值。function add(a,b=2){
return a + b;
}
console.log(add(5));
用箭头有函数改写后的:
let add = (a,b=2) => a+b;
console.log(add(5));
模板字符
1.可以换行书写,保持字符串中的换行和空格 2.模板字符串中可以识别变量,使用美元符大括号:`${变量}`3.可以多行定义一个字符串,并在控制台中以多行形式输出
<script>
// ES6提供了定义字符串的新语法
// 将以前定义字符串的双引号和单引号 ==> 变成反引号 ``
// var str = '<tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>'
// console.log(str);
// 可以多行定义一个字符串,并在控制台中以多行形式输出
// var str = `
// <tr>
// <td></td>
// <td></td>
// <td></td>
// </tr>
// <tr>
// <td></td>
// <td></td>
// <td></td>
// </tr>
// <tr>
// <td></td>
// <td></td>
// <td></td>
// </tr>
// `
// console.log(str);
// var imgPath = '1.jpg'
// var str = '<img src="' + imgPath + '" />'
// console.log(str);
// var str = `<img src="${imgPath}" />`
// console.log(str);
解构赋值
解构对象:
1.obj必须是一个对象
2.obj中必须有name属性
let obj = {
name:"张三",
age:12,
sex:"男",
}
let name = obj.name;
let age = obj.age;
解:
let obj = {
name:"张三",
age:12,
sex:"男",
}
let {name} = obj;
/*
表示从obj中获取name属性,并赋值给声明的name变量
*/
解构数组:
解构数组的时候是按顺序取出数组中的值,解构一个变量,只能拿到第一个元素
let arr = [1,2,3];
let [num1] = arr; // 从数组中拿出第一个元素赋值给num1变量
解构多个元素:
let arr = [1,2,3];
let [num1,num2] = arr; // num1 = arr[0] num2 = arr[1]
多维数组解构:
let arr = [1,2,3,[4,5,6]];
let [a,b,c,[aa,bb]] = arr;
console.log(aa,bb); // 4 5
展开运算符
将一个数组展开为多个变量赋值给多个形参let arr = [1,2,3];
function fn(a,b,c){
console.log(a,b,c); // 1 2 3
}
fn(...arr);
利用展开运算合并数组
// 之前的写法
let arr = [1,2,3];
let arr1 = [4,5,6].concat(arr);
// 利用展开运算合并
let arr2 = [4,5,6].concat(...arr);
// 再简化
let arr3 = [4,5,6,...arr]
合并运算符
将多个实参合并为一个数组function fn(...arr){
console.log(arr);
}
fn(1,2,3); // [1,2,3]
箭头函数中没有arguments,可以使用合并运算符来模拟arguments
var fn = (...arr) => {console.log(arr)};
fn(1,2,3); // [1,2,3]
对象的简写方式
如果对象的属性名和变量名同名,则可以光写属性名let name = '某某';
let age = 8;
let obj = {
name,
age
}
console.log(obj);