zoukankan      html  css  js  c++  java
  • this的详解

      // 定义:
        //     声明
        // 执行:
        //     函数名+()
        
        // 函数的定义的位置
        // 函数的执行的位置
    
        // 位置
    
        // this:执行上下文,this一般存在于函数中,表示当前函数的执行上下文,如果函数没有执行,那么this没有内容,只有函数在执行后this才有绑定
    
        
    
        // 执行的位置!!!
    
        // 1.默认执行:fn():this指向window,严格模式指向undefined
        // function fn(){
        //     "use strict"
        //     console.log(this)
        // }
        // fn()
        
        // 2.通过对象执行(通过上下文对象执行,隐式执行):obj.fn():当前的执行对象
            // function fn(){
            //     console.log(this)
            // }
            // var a = 10;
            // var obj = {
            //     a:20,
            //     b:fn
            // }
            // obj.b();
            // var obj2 = {
            //     a:30,
            //     b:obj.b
            // }
            // obj2.b();
            // var obj3 = {
            //     a:40,
            //     b:obj2
            // }
            // obj3.b.b()
        
            // 隐式丢失
            // setTimeout(obj.b, 2000);
            // function setTimeout(cb,t){
            //     // t
            //     cb()
                
            // }
        
        // 3.显式执行(通过函数的方法bind执行):指定的是谁,就是谁
            function fn(){
                console.log(this)
            }
            var f = fn.bind(window);
            f();
    
            // 找回隐式丢失的this,其实就是使用显式执行,强行绑定
            // setTimeout(obj.b.bind(obj), 3000);
    
    
    
        // 谁执行了this所在的函数,this就是谁
        
    
        // 场景:
        //     1.默认执行:非严格模式下指向window
        //             window || undefined
        //     2.隐式执行:通过任意对象执行
        //             直接的执行对象
        //     3.显式执行:通过函数的bind或call或apply执行
        //             写谁就谁
    
    
        // function fn(){
        //     console.log(this)
        // }
        // var obj = {}
        // obj.fn = fn;
    
        // obj.fn();       //obj
    
        // var obtn = document.getElementById("btn");
        // obtn.onclick = fn;
        // // 点击时        //obtn
    
        // fn.bind("hello")();     //"hello"
    
        // var f = fn.bind(obj);
        // f();             //obj
    
        // fn();           //window
    
    
    
    
        // 4.构造函数执行(通过new执行)
    
    
    
       function fn(a){
             console.log(this)
             console.log(a)
            console.log(arguments)
         }
    
         fn("admin")
    
        var f = fn.bind("hello","zhangsan");
        f("root")
    
    
        // bind():执行结束后,会返回一个新函数,新函数是被改变了this和参数的老函数
        // 一种:一个参数:
        // 参数:表示this的指向
        // 二种:多个参数:
        // 参数1:表示this的指向
        // 参数2:会与原函数的参数一起放在新函数中
        // ...
        // bind将新的参数和老的参数,一起传给了新的函数
    
        // 改变this指向
    
        var obj = {
            name:"obj",
            show:function(){
                console.log(this.name)
            }
        }
        obj.show()
    
        var obj2 = {
            name:"obj2"
        }
        obj.show.bind(obj2)
    
       
        var name = "zhangsan";
        obj.show.bind(window)();
        // window.name = "张三"
    
            
    
    
        // this只能是对象
  • 相关阅读:
    MyEclipse 常用快捷键
    javaEE基础08
    MySql卸载重新安装出现Start service没有响应的解决办法(64位)
    javaSE基础07
    为WAMP中的mysql设置密码(默认为空)
    javaSE基础06
    javaSE基础05
    vue框架构建项目流程
    阿里云或本地部署服务器(一)---nginx本地和服务器代理
    修改vue element Transfer 穿梭框里内容区的宽度
  • 原文地址:https://www.cnblogs.com/huangping199541/p/11450564.html
Copyright © 2011-2022 走看看