笔记 - ES6基础

箭头函数与传统函数的区别

写法区别

	// 传统函数
	function test(a, b) {
		return a + b;
	}
	// 函数表达式
	const test2 = function(a, b) {
		return a + b;
	}
	
	// 箭头函数
	const test3 = (a, b) => {
		return a + b;
	}
	const test4 = (a, b) => a + b;

上下文（this指向）

• 传统函数：this由当前执行环境的上下文决定（一般绑定、隐式绑定、显示绑定、new操作符）。
• 箭头函数：没有自己的this，继承上层函数的this。

	const obj = {
		teacher: 'xx',
        leader: 'zz',
        zhuawa: ['yy', 'aa'],
        getTeacher: function() {
			console.log('teacher is: ', this.teacher);
			return this.teacher;
		},
		getLeader: () => {
			console.log('leader is: ', this.leader);
			return this.leader;
		}
	}

	obj.getTeacher(); // teacher is: xx
	obj.getLeader(); // leader is: undefined (this 指向 window)

箭头函数无法成为构造函数

	const Obj = (name, age) => {
		this.name = name;
		this.age = age;
	} 

	const obj1 = new Obj('myx', 18); // TypeError: Obj is not a constructor

	Obj.prototype // undefined

箭头函数无法使用 arguments

	const test1 = function(teacher) {
        console.log(arguments);
    }

    const test2 = teacher => {
        console.log(arguments);
    }

	test1(); // {...}
	test2(); // ReferenceError: arguments is not defined

class类

传统类与class类

	// 传统类 function
	function Course1(teacher, course) {
		this.teacher = teacher;
		this.course = course;
	}

	Course1.prototype.getCourse = function() {
		return `teacher is:${this.teacher}, course: ${this.course}`
	}

	const course = new Course1('xxx', 'ES6');
	course.getCourse(); // teacher is:xxx, course: ES6

	// Es6
	class Course2 {
		constructor(teacher, course) {
			this.teacher = teacher;
			this.course = course;
		}

		getCourse() {
			return `teacher is:${this.teacher}, course: ${this.course}`;
		}
	}

	const course = new Course2 ('云隐', 'ES6');
    course.getCourse();

class类的特性

class类型

	console.log(typeof Course); // function

prototype

	console.log(Course1.prototype); // { constructor: f Course1(teacher, course) }
	console.log(Course2.prototype); // { constructor: class Course2 } 

class & 函数对象 属性

	console.log(course1.hasOwnProperty('teacher')); // true
	console.log(course2.hasOwnProperty('teacher')); // true

setter & gettter

	// 可以理解为获取实例属性、修改实例属性时的拦截器
	class Course {
        #course = 'es6';
        constructor(teacher, course) {
            this._teacher = teacher;
        }
        get course() { // 当外部调用Course实例上的course属性时调用
        	// 留有空间
            return this.#course;
        }
        set course(val) { // 当外部修改Course实例上的course属性时调用
        	// 留有空间
            if(val) {
                this.#course = val;
            }
        }
    }

静态属性

可以直接通过类或者方法调用的属性或方法，叫做静态属性。

// ES5 
    function Course() {
        // ……
    }
    Course.ring = function() {
        // ……
    }

    // ES6
    class Course {
        constructor() {
            //……
        }

        static ring() {
            //……
        }
    }

    Course.ring();

继承

	// es5继承
    function Course() {
        // ……
    }
    Course.ring = function() {
        // ……
    }
    Course.prototype.send = function() {
        // ……
    }

    function Child() {
        Course.call(this, '云隐', 'ES6');
        this.run = function() {
            // ……
        }
    }
    Child.prototype = Course.prototype;

    // es6
    class Course {
        constructor() {
            //……
        }
        static ring() {}
        send() {}    
    }
    // => 工厂模式
    class Child extends Course {
        constructor() {
            super('云隐', 'ES6')
        }
        run() {}
    }

const、let与var区别

const 常量标识

const 声明的变量之后不允许修改

	const a = 'a';
	a = 'b'; // TypeError: Assignment to constant variable.

ES5 模拟常量的实现方案

	var a = 'a';
	Object.defineProperty(window, 'a', {
		writable: false
	})

	a = 'b'; // 不会报错，但是无法修改值
	console.log(a); // a

块级作用域 (const、let)

	if(true) {
		var arg1 = 'xxx';
	}
	console.log(arg1); // xxx

	if(true) {
		// let arg2 = 'xxx';
		const arg2 = 'xxx';
	}
	console.log(arg2); // ReferenceError: arg2 is not defined
	// 变量提示 + 块级作用域

无变量提升

	console.log(arg1); // undefined
	var arg1 = 'xxx';

	// 相当于
    var arg1;
    console.log(arg1);
    arg1 = '云隐';

	// 无变量提升 - 先声明再使用
    console.log(arg2);
    const arg2 = '云隐'; // ReferenceError: arg2 is not defined

	// 非全局作用域
	var arg1 = '云隐';
    console.log(window.arg1);

    // const不在window中
    const arg1 = '云隐';
    console.log(window.arg1);

let or const

• 引用型 const

	const obj = {
		teacher: 'myx',
		leader: 'xxx'
	}
	obj.teacher = 'xy';

	const arr = ['myx', 'xxx'];
	arr[0] = 'aaaa';

	// 上面的带
	// 引用类型的原理 - 指向地址
	Object.freeze()
	
	const obj2 = {
        teacher: '云隐',
        leader: '小可',
        zhuawa: ['黄小杨', '部部']
    }
     object.freeze(obj2);
     obj2.zhuawa[0] = '云隐';

    // freeze只能冻结根层，嵌套引用类型需要遍历递归
    // 面试题目
    function deepFreeze() {
        // 2. 确定主执行步骤
        Object.freeze(obj);
        // 3. 逐级深入
        (Object.keys(obj) || []).forEach(key => { // for in - hasOwnProperty
            let innerObj = obj[key];
            
            if (typeof innerObj === 'object') {
                // 1. 递归模式确定
                deepFreeze(innerObj);
            }
        })
    }
    // lodash: clone deepclone equal deepequal

解构赋值

示例

	const zhaowa = {
		teacher: {
			name: '',
			age: 30
		},
		leader: '',
		name: 'es6'
	}

	const {
		teacher: {
			name,
			age
		},
		leader,
		name: className
	} = zhaowa;

场景

一、形参解构

	// ES6之前的写法
	const sum = arr => {
	    return arr.reduce((acc, cur, index) => {
	        return acc + cur;
	    }, 0)
	}

	//解构写法
	const sum = ([a, b, c]) => a + b + c

二、结合初始值

	const course = ({ teacher, leader, course = 'zhaowa' }) => {
        // …… 
    }

    course({
        teacher: 'yy',
        leader: '小可'
    })

三、返回值

    const getCourse = () => {
        return {
            teacher: '',
            leader: ''
        }
    }

    const { teacher, leader } = getCourse();

四、变量交换

	let a = 1;
	let b = 2;
	[a, b] = [b, a];