一、学习过程
一、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,与后端进行交互,开始一个月写项目