this指向

简介: this指向

(1)在全局环境中的this——window

无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象。


   

"use strict"
        console.log(this); //window
        console.log(this===window);//true


(2)在函数中的this——window

在函数内部,this的值取决于函数被调用的方式。  


 

function f() {
        console.log(this); //window
        console.log(this===window);//true
       }
       f()
       console.log(f()===window.f()); //true


因为定义的函数在全局作用域下定义的


(3)函数在严格模式下——undefined


function f() {
            "use strict"
            console.log(this); //undefined
            console.log(this === window); //false
        }
        f()


上面的f是直接调用的指向undefined


function f() {
            "use strict"
            console.log(this); //window
            console.log(this === window); //true
        }
        window.f()


有一些浏览器最初在支持严格模式时没有正确实现这个功能,于是它们错误地返回了window对象。


(4)对象中的this——指向调用者


let obj = {
            fn: function () {
                console.log(this);
            }
        }
        obj.fn() //指向obj这个对象


(5)栗子①


 

function fun() {
            console.log(this.name);
        }
        let obj = {
            name: '思思',
            fn: fun
        }
        var name = "七七"
        obj.fn()  //思思
        fun()    //七七


obj.fn() 是obj 调用的所以去找obj里面的name


fun是window调用的所以去找全局里面的this.name


(6)栗子②


var obj1 = {
            name: '七七',
            f: function () {
                console.log('姓名:' + this.name);
            }
        }
        var obj2 = {
            name: '思思'
        }
        obj2.f = obj1.f
        obj1.f() //姓名:七七
        obj2.f() //姓名:思思


把obj1.赋值给obj2.f  obj2也有了f 方法


(7)栗子③


function foo() {
            console.log(this.a);
        }
        var obj2 = {
            a:2,
            fn:foo
        }
        var obj1={
            a:1,
            o1:obj2
        }
        obj1.o1.fn() //2


obj1里面的o1是obj2  obj2里的fn是foo函数   在obj2里面调用的拿到obj2中的a


(8)事件绑定中的this


<button onclick="Hclick()">点击事件</button>
<script>
       function Hclick() {
            console.log(this);
        }
</script>

由于还是在当前window环境下运行的还是指向window


<button onclick="console.log(this)">点击事件</button>


运行在节点对象中 指向当前dom


(9)动态绑定


<button>动态绑定</button>
<script>
       let btn=  document.getElementsByTagName('button')[0].onclick=function(){
           console.log(this);    
       }
</script>

指向当前dom


(10)addEventlistenr——当前dom


let btn = document.getElementsByTagName('button')[0].addEventListener('click',function () { console.log(this); })
指向当前dom <button>动态绑定</button>   
    let btn = document.getElementsByTagName('button')[0].addEventListener('click',()=>{
            console.log(this);
        })

换成箭头函数后 this指向当前作用域下的上级作用域的this    window


(11)构造函数中的this——当前实例化对象


function Pro() { 
            this.x='1'
            this.y=function(){ console.log(this);}
         }
         var p = new Pro()
         p.y()


通过构造函数创建了一个新的实例对象  所以当前的this指向新的实例对象


12)定时器中的this——window  


 

setInterval(function () {console.log(this)  },1000)


this指向当前window


小扩展


var MyClass = function () {
            this.name = 1;
        }
        var myClass = new MyClass();
        console.log('myClass:', myClass);


当有了返回值以后


var MyClass = function () {
            this.name = 1;
            return {
                name: 2
            }
        }
        var myClass = new MyClass();
        console.log('myClass:', myClass);


会把return的内容放在构造函数中  

相关文章
|
自然语言处理 JavaScript 前端开发
Day18 - this指向的多种形式
Day18 - this指向的多种形式
98 0
指向函数的指针
Author: bakari   Date: 2012.8.8 做好总结我觉得是把知识学扎实必不可少的实践环节。这个知识点是当初自己在学习这一块做的一些笔记,现在在知识提升的情况下将它重新整理一下以作巩固之用。
701 0
使用指向函数的指针
使用指向函数的指针
121 0
|
C语言
指向数组的指针
以下是 int a[5],以及其各个元素的地址 a[0] 0019FF1C a[1] 0019FF20 a[2] 0019FF24 a[5] 0019FF28 a[4] 0019FF2C
124 0
指向数组的指针
|
10月前
指针指向数组
指针指向数组
47 0
指针和引用(4)指向指针的指针
1.知识点 (1)在程序中可以声明指向任何数据类型的指针,指针也可以指向指针类型,成为指向指针的指针。下面是一个使用例子 1 int a=10,b=20; 2 int *q=&a; 3 int **p=&q; 4 **p=30; (2)如果想通过指针在被调函数中修改主调函数的变量,必须将主调函变量(务必确定该变量的类型,有时候可能变量本身就是指针,这时候形参就需要是指针的指针了)的地址作为参数,在被调函数中修改主调函数指向的内容。
1195 0