JavaScript高级与ES6学习

一、学习过程

一、this改变指向问题（call，apply，bind）

1、call

function a(){
    console.log(this); //输出函数a中的this对象
}
function b(){} //定义函数b
 
var obj = {name:'onepixel'}; //定义对象obj
 
a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object

当执行b.call时，字符串作为参数传递给了b，由于call作用，函数b中的this指向变成了对象a，所以

相当于调用了对象上的函数b，实际上a没有定义函数b

var a = {
 
    name:'onepixel', //定义a的属性
 
    say:function(){ //定义a的方法
        console.log("Hi,I'm function a!");
    }
};
 
function b(name){
    console.log("Post params: "+ name);
    console.log("I'm "+ this.name);
    this.say();
}
 
b.call(a,'test');
>>
Post params: test
I'm onepixel
I'm function a!

2、apply

apply与call唯一不同的就是传递参数的方式不一样，apply第二个参数必须是一个数组或者类数组，而call允许传递一个参数列表。、

3、bind

因为call与apply会对目标函数自动执行，无法在事件绑定函数中使用，因为事件绑定函数不需要我们手动执行，而是在事件触发时由js内部自动执行。而bind在实现改变函数的this时又不会自动执行目标函数。

当点击网页时，onClick函数被触发，输出onepixel p1 p2，说明onclick中的this指向被bind改变成了obj对象。er

var obj = {name:'onepixel'};
 
/**
 * 给document添加click事件监听，并绑定onClick函数
 * 通过bind方法设置onClick的this为obj，并传递参数p1,p2
 */
document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);
 
//当点击网页时触发并执行
function onClick(a,b){
    console.log(
            this.name, //onepixel
            a, //p1
            b  //p2
    )
}

二、 执行上下文

1、全局执行上下文

*在执行全局代码前先将window确定为全局执行上下文

*对全局数据进行预处理

        *var定义的全局变量 ==> undefined ，添加为window属性

        *function声明的全局函数 ==> 赋值（fun），添加为window方法

        *this ==> 赋值（window）

*开始执行全局代码

2、函数执行上下文 

*在调用函数之前，准备执行函数体之前，创建对应的函数执行上下文对象

*对局部数据进行预处理

        *形参==>赋值（实参） ==> 添加为执行上下文属性

        *arguments ==>实参列表,添加为执行上下文属性

        *var定义的布局变量 ==> undefined ，添加为执行上下文属性

         *function声明的全局函数 ==> 赋值（fun），添加为window方法

        *this ==> 赋值（调用函数对象）

*开始 执行函数体代码

3、执行上下栈

在全局代码执行之前，js引擎会创建一个栈来存储管理所有的执行上下文对象

在全局执行上下文确定后，将其添加到栈中

在函数执行上下文创建后，将其添加到栈中

在当前函数执行完后，将栈顶的 对象移除

当所有代码执行完后，栈中只剩下window

 三、js几种循环方式

1、for...in循环

for ... in 是在 ES5 中新增的，遍历所有可枚举的属性（包括原型上的），最好只用来循环对象。

它的设计初衷就是循环对象，所以推荐大家用它时最好就是遍历对象

用于 遍历对象的所有可枚举属性、字符串、数组（最好不要使用for...in循环数组）

2、for...of循环

for...of 是在 ES6 中新增的 语句，它遍历一个可迭代的对象（不明白可迭代对象，看文章顶部有关可迭代对象的介绍）

 用于遍历可迭代对象以及字符串

3、.foreach循环

forEach 是 ES5 提出的，挂载在可迭代对象原型上的方法。forEach是一个遍历器，负责遍历可迭代对象。

二、学习心得

这周大概学习了js高级核心内容，主要是程序的进行过程，下一次的学习计划就是做项目了，虽然前面的增删改查写的特别不好，写项目是一个很有挑战性的事情，但是凡是都有第一次哈哈哈哈，加油吧。

三、学习计划

学习Thymeleaf，与后端进行交互，开始一个月写项目