千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip
一.this关键字的解读
1.每一个函数内部都有一个关键字是this ,可以让我们直接使用的
2.函数内部的 this 指向谁，取决于函数的调用方式
3.函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系
普通函数 - this - window
自执行函数 - this - window
定时器 - this - window
函数表达式 - this - window
事件处理函数 - this - 触发事件的元素对象
对象里面的函数(方法) - this - 当前调用方法的对象
function fn() {//普通函数
console.log(this);
}
function fn () {
console.log(this);
}
fn();//window
window.fn();//window
document.onclick = fn;//事件来调用 document
fn();
window.fn();
document.noclick = fn;
var fn = function () {
console.log(this);//window
}
fn();
var fn = function () {
console.log(this);
}
window.setTimeout(function () {
console.log(this);//window
}, 1000);
var obj = {
name: 'zhangsan',
showname: function () {
console.log(this);//this->obj
console.log(this.name);//zhangsan
}
}
obj.showname();
var obj = {
name: 'zhangsan',
showname: function () {
console.log(this);
console.log(this.name);
}
}
obj.showname();
!function () {
console.log(this);//window
}();
var obj1 = {
name: 'zhangsan',
obj2: {
age: 19,
show: function () {
console.log(this);//this->obj2
console.log(this.name);//undefined
}
}
}
obj1.obj2.show();
!function () {
console.log(this);
}();
var obj1 = {
name: 'zhangsan',
obj2: {
age: 19,
show: function () {
console.log(this);
console.log(this.name);
}
}
}
obj1.obj2.show();
var obj1 = {
name: 'zhangsan',
obj2: {
age:19,
show: function () {
console.log(this);
console.log(this.name);
}
}
}
obj1.obj2.show();
总结：谁调用了函数，函数内部的this指向谁，如果函数前面没有对象调用，默认指向window
二.函数也是window的方法，var声明变量也是window的属性(很多时候window可以省略)
function fn(m, n) {
console.log(m + n);
}
fn(1, 2);//3
window.fn(3, 4)//7
var num = 1;
console.log(num);//1
console.log(window.num);//1
console.log(num === window.num);//true
function fn(m, n) {
console.log(m + n);
}
fn(1, 2 );
window.fn(3,4)
var num = 1;
console.log(num);
console.log(window.num);
console.log(num === window.num);
三.this的应用
var liEles = document.querySelectorAll('li');
for (var i = 0; i < liEles.length; i++) {//循环的目的是给每一个li元素添加事件
liEles[i].onclick = function () {//点击事件，说明循环已经结束了
// console.log(i);//循环的最后一次值
// this:谁调用函数this指向谁
// console.log(this);//指向当前点击的li元素
// console.log(this.innerHTML);
}
}
var liEles = document.querySelectorAll('li');
for (var i = 0; i < liEles.length; i++) {//循环的目的是给每一个li元素添加事件
liEles[i].onclick = function () {//点击事件， 说明循环已经结束了
console.log(i);//循环的最后一次值
// this:谁调用函数this指向谁
console.log(this);//指向当前点击的li元素
console.log(this.innerHTML);
}
}
四.总结this的特点
1.只要出现的function(函数)，里面就可以存在this。
2.this不看声明，看调用，谁调用函数，函数里面的this指向谁。
四.总结this的特点
1.只要出现的function(函数), 里面就可以存在this。
2.this不看声明,看调用，谁调用函数，函数里面的this指向谁。
