js中this的指向

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();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值