this的指向犹如在生活中指代。这个”相似,不同环境中的this指向也是不同的
1.全局环境下指向window
console.log(this); // window
2.普通函数中指向全局
function fn(){
console.log(this);
// window B
}
fn();
//嵌套函数也指向window
3.对象调用指向该对象
let obj={
name: "zhangsan'
talk(){
console.log(this); // obj 对象
}
obj.talk();
function foo() {
console. log(this);
foo();
const obj = { name: "zhangsan" };
obj.talk = foo;
obj.talk(); //obj
}
var name = "window"; //只有var才行
let obj={
name:
" zhangsan",
talk: () => { // 箭头函数处于全局环境
console.log(this.name);
}
obj.talk(); // window
4.事件监听器中指向事件源
btn.onclick = function(){
console.log(this); // <input type="button" id="btn">
5.构造函数中的this,指向new出来的实例对象
function Person(name) {
this.name = name;
console.log(this); // {name:"zhangsan'}
}
let obj = new Person(" zhangsan");
//new经历的4个步骤,就提到了绑定this到空对象上
6.箭头函数的this 箭头函数的this指向,取决于当前箭头函数声明的环境(执行上下文)因为箭头函数没有自己的arguments和this,它内部的this是由词法作用域上下文确定(箭头函数需要获取函数定义时所在的环境的this,箭头函数定义在哪个作用域中,它的this就继承作用域中this的指向)
定义在全局指向window
let fn= () => { console.log( this ) } //定义在全局
fn(); // window
分析输出
let count=()=>{
console.log(this); //window
console.log(this.number); //5
var number = 5;
let obj={
say: count
};
obj.say();
let number = 5;
let obj={
number: 10,
count: () => {
console.log(this.number); //undefined
}
}
obj.count();
const zhangsan = {
name: "zhangsan",
talk: function () {
console.log(this); //zhangsan
let lisi = {
name: "lisi",
talk: () => {
console. log(this); //zhangsan
}
};
lisi.talk();
}
};
zhangsan.talk();
let person = {
name: 'zhangsan',
foo() {
let name = 'wangwu';
let bar=()=>{
console.log(this.name); //zhangsan
}
bar();
}
}
person.foo();
let obj = {
a: 10,
fn: () => {
let bar = () => {
console.log(this); //window
}
bar();
}
}
obj.fn();
var name = "window";
let person = {
name: "lisi",
say: () => {
console.log(this.name); //window
}
}
let student = {
name:"wangwu"
};
student.say = person.say;
student.say();