this

简介: 修改this指向是经常遇到的问题在这做个粗浅的理解

1.前言


修改this指向是经常遇到的问题在这做个粗浅的理解


2.不管函数在哪,要看谁调用


1.基础


//   *********1 全局作用域下 ,this指向 window
        console.log("1  全局作用域下",this)//window.console.log(this)
        // **********2 在事件函数中, this 指向 事件目标/触发者
        document.body.onclick = function(){
            console.log('2  在事件函数中',this)
        }
        // *********3  在构造函数中,this指向构造函数创建的对象
        function Stuednt (_name){
            this.name = _name
            console.log('3  在构造函数中',this)
        }
        var zhangSan = new Stuednt('张三')
        // var Lsi = new Stuednt('李四')
        // ********4 在对象方法中,this指向这个对象本身
         var wangWu = {
             name:'王五',
             skill:function(){
                 console.log('4 在对象方法中',this)
             }
         }
         wangWu.skill()
        //  ********5 计时器中使用this ,this指向window
        // 如果使用ES6的箭头函数则保持原有指向,事件函数中的事件目标
        // 箭头函数导致this总是指向函数定义生效时所在的对象
        // 箭头函数this为父作用域的this,不是调用时的this
        // 箭头函数的this永远指向其父作用域,任何方法都改变不了
        document.querySelector('button').addEventListener("click",function(){
            // window.setTimeout(function(){
            setTimeout(function(){
                console.log("5 计时器中使用this",this)//window
            },1000)
             console.log("监听事件 5",this)
            setTimeout(()=>{
                console.log("5 箭头函数 →",this)//
            },1000)
        })

2.高那么一点点


var name = "李白";
    var person = {
      name: "杜甫",
      sayHi() {
        console.log(this.name, "你好");
      }
    };
    person.sayHi();
    //   把sayHi的函数地址给fn保存 
    var fn = person.sayHi;
    fn();
  var person2 = { name: "王勃" };
    person2.sayHi = person.sayHi;
    person2.sayHi();
    // "use strict";  
   //严格模式下是 undefined 
    // person2.sayHi.call(window);



3. this指向修改 apply call bind


1.如何判断用哪个

立即执行??

还是返回一个函数地址 ,找时间调用


// **************call(参数1,原函数参数1,原函数参数2...)  立即执行函数
    //  参数1 是this指向, 
    // 参数2 是原函数的参数 ,逗号 隔开
    function fn2(a, b) {
      console.log(this);
    }
    fn2();
    fn2.call({}, 1, 2);
// ***************apply(参数1,[原函数参数])  立即执行函数
    // 参数1  是this指向, 
    // 参数2  原函数的参数 数组形式
    fn2.apply({}, [10, 20]);
    //******************bind(参数1,原函数参数1,原函数参数2...)绑定 并不执行 
    // 也就是不会去调用绑定的函数
    // 参数1  是this指向,
    // 参数2  原函数参数 逗号 隔开
    // 参数格式和call一样
    // fn2.bind({});
    var fnBind = fn2.bind({ name: "bind" }, 11, 22);
    // 自己找时间调用...
    fnBind();
    //  函数被call执行了一次 执行完之后会被执行的结果代替没有返回值就是undefined  所以不会持续输出
    // setInterval(fn地址, 不能是 fn(), 1000);
    setInterval(
      function (params) {
        console.log(this);
      }.call({ name: "call" }),
      1000
    );
    // 所以用bind
    setInterval(
      function (params) {
        // console.log(this);
      }.bind({ name: "bind" }),
      1000
    );



4.Tips 抛砖引玉



var nums = [2,55,10,99,66]
 // 不是为了修改this ,是为了修改参数传递方式
 console.log("min",Math.min.apply(Math,nums))




相关文章
|
安全 测试技术 数据库连接
利用MSF上线断网主机的思路分享
利用MSF上线断网主机的思路分享
223 0
|
Android开发
Android WebView选择图片、发送图片
Android WebView选择图片、发送图片
649 0
|
前端开发 Python
幸运哈希hash单双尾数大小竞猜游戏开发源码部署
def is_even_number(number): """判断一个整数是否为偶数""" return number % 2 == 0
|
索引 Python
Python 集合set详解(超详细)
Python 集合set详解(超详细)
221 0
|
Dubbo 应用服务中间件
告别手写,使用 Doc View 快速生成接口文档
Doc View 是一款快捷生成接口文档 IDEA 插件,使用 Doc View 可以将开发人员从繁琐的文档编写中释放出来,极大的节省开发时间。
299 0
我惊了!CompletableFuture居然有性能问题! (下)
我惊了!CompletableFuture居然有性能问题! (下)
588 0
我惊了!CompletableFuture居然有性能问题! (下)
|
消息中间件 Java Kafka
flink错误总结
主要记录了我这几天初始接触flink遇到的一些问题,供大家分享,如果有更好的解决方法可以私信我!
flink错误总结
|
消息中间件 存储 缓存
聊聊记账
聊聊记账
413 0
聊聊记账
|
Java 程序员
Java小游戏程序打包成exe文件
前言 作为一个程序员小白是不是在敲出自己的第一个Java小游戏后不知道怎么发个给好友去玩呢!我来教你
780 0
Java小游戏程序打包成exe文件