JSthis关键字和ES6

151 阅读5分钟

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);