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




相关文章
|
机器学习/深度学习 数据采集 算法
深度学习和机器学习中针对非时间序列的回归任务,有哪些改进角度?
本文探讨了在深度学习和机器学习中针对非时间序列的回归任务的多种改进策略,包括数据预处理、数据集增强、特征选择、模型选择、模型正则化与泛化、优化器选择、学习率调整、超参数调优以及性能评估与模型解释,旨在提升模型的性能和可解释性。
264 1
深度学习和机器学习中针对非时间序列的回归任务,有哪些改进角度?
|
7月前
|
人工智能 算法 云计算
通义大模型合作计划升级发布
通义大模型合作计划升级发布
|
XML Java 数据格式
深度解析 Spring 源码:从 BeanDefinition 源码探索 Bean 的本质
深度解析 Spring 源码:从 BeanDefinition 源码探索 Bean 的本质
175 3
|
Java API Maven
使用Java Libvirt API 访问虚拟机信息
使用Java Libvirt API 访问虚拟机信息
246 1
|
敏捷开发 测试技术 持续交付
敏捷开发:快速迭代的秘密
【6月更文挑战第19天】敏捷开发强调快速迭代与客户合作,通过短周期的开发循环,持续集成测试,适应需求变化。关键实践包括明确目标、小步快跑、快速反馈和自动化工具的使用。挑战如客户参与和需求变更需通过加强沟通和提升团队技能来应对。敏捷方法现已成为软件开发的主流选择。
|
SQL 存储 开发框架
实体框架EF(Entity Framework)简介
实体框架EF(Entity Framework)简介
338 7
|
监控 安全 网络安全
构建安全防线:云计算环境下的网络安全策略与实践
【4月更文挑战第25天】随着企业数字化转型的深入,云计算已成为支撑现代业务架构的关键平台。然而,云服务的广泛采用同时带来了前所未有的安全挑战。本文针对云计算环境中的网络安全问题进行探讨,分析了云服务模型中存在的安全风险,并提出了一系列切实可行的安全策略和措施。这些策略不仅涵盖了数据加密、访问控制、入侵检测等传统安全领域,还包括了合规性评估、安全态势感知、以及应急响应机制等新兴话题。通过综合运用这些策略,旨在帮助组织在享受云计算带来的便利和灵活性的同时,有效防范潜在的网络威胁,确保信息安全。
161 3
|
XML Java 数据格式
【Lua基础 第2章】lua遍历table的方式、运算符、math库、字符串操作方法
lua遍历table的方式、运算符、math库、字符串操作方法
950 0
【Lua基础 第2章】lua遍历table的方式、运算符、math库、字符串操作方法
|
C++
【SPSS】二项分布检验详细操作教程(附案例实战)
【SPSS】二项分布检验详细操作教程(附案例实战)
1001 0
|
XML JSON 监控
《李斌的笔记》SAP 全部文章目录、快速导航、持续更新
我把自己的全部文章都整理成目录,放在这篇文章中以实现快速导航,这样更方便阅读,本章内容持续更新。
501 0