this的最基本五种指向

2019-03-05  本文已影响0人  JSONYUAN

<script>
/*
* this 指向<调用>该<函数>的那个<对象>
*
*
* 场景1:
* 直接调用 普通函数
* this 指向 window,因为默认是 window 调用该函数
*
* 场景2:
* 事件处理函数
* this 指向 触发事件处理函数的那个事件源 对象
*
* 场景3:
* 对象方法
* this 指向调用该方法(函数)的对象
*
* 场景4:
* 定时器内的回调函数
* this 指向 window 对象,因为定时器是 window对象下的一个方法而已
*
* 场景5:
* 构造函数内部的this
* this 指向当前构造函数实例对象
*
*
* */

/* 场景1:普通函数 */
// function fn() {
//     console.log(this);    //  this === window
// }
// fn();

/* 场景2:事件处理函数 */
// var btn = document.getElementById('btn');
// btn.onclick = function () {
//     console.log(this);         // this === btn
// };

/* 场景3:对象的函数 */
// var obj = {
//     name: '李狗蛋',
//     age: 18,
//     sayHi : function () {
//         console.log(this);     // this === obj
//     }
// };
// obj.sayHi();

/* 场景4:定时器回调函数 */
// var timer = window.setInterval(function () {
//     console.log(this);        // this === window
// },1000)

/* 场景5:构造函数 */
function Person(name) {
    this.name = name;
    console.log(this);     // this 指向实例对象,实例对象还没赋值给变量,所以判断不了
}

var p1 = new Person('小明');

</script>

上一篇下一篇

猜你喜欢

热点阅读