关于this指向和react vue2 3 的diff--后续补充

this指向

全局作用域中或者普通函数中this指向全局对象window

立即执行函数this必定指向window

定时器this指向window

事件中this指向事件源对象

方法中谁调用就指向谁

对象内调用方法,谁调用就指向谁

构造函数中this指向对象实例

1.全局作用下默认绑定window 全局作用下独立调用函数绑定window

2.隐式绑定:对象內调用方法 谁调用就指向谁

 let obj = {
name: 'obj',
  foo: function () {
    console.log(this);   //this指向obj
  }
}
obj.foo()
===================
隐式丢失
let obj = {     

 name: 'obj',     

 foo: function () {     

   console.log(this);    //obj       

 function test() {       

   console.log(this);  //window 为什么? 因为test独立调用      

 }       

 test()  

   }   }    obj.foo()

===================

隐式丢失

 let obj = {     

 name: 'obj',    

  foo: function () {  

      console.log(this);  //window   
为什么不是obj? bar拿到obj.foo的引用,然后在全局下独立调用    

 }   }   

 let bar = obj.foo 

   bar()

=======

3.显式绑定

call、apply、bind bind返回一个新函数,新函数指向绑定的对象,旧函数不会

4、new绑定

this指向函数实例化之后的对象

绑定规则优先级:

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

输出题:

   var name = "outer"
        function K() {
            let name = "k"
            let innerObj = {
                print: function () {
                    console.log(name)
                    console.log(this.name)
                }
            }
            return innerObj
        }
        //o只有print
        // 创建对象并且调用 调用函数k返回对象 赋值给o 
        let o = K()
        o.print()
        let p = o.print
        p()
//k undefined k outer
//baz bar foo 
 function baz() {
            console.log("baz");
            bar(); // <-- bar的调用位置
        }
        function bar() {
            console.log("bar");
            foo(); // <-- foo的调用位置
        }
        function foo() {
            console.log("foo");
        }
        baz(); // <-- baz的调用位置

# vue2 vue3 react 的diff区别    

diff:

Vue 3.x 在 diff 算法上引入了一些新的优化策略,如静态提升等,以减少 diff 比较的开销;

而 React 则通过 Fiber 架构实现了增量式的 diff 算法,实现了更加灵活和高效的精准的更新

vue3静态提升:该策略通过分析模板生成的虚拟 DOM 树,将静态节点(不会发生变化的节点)提升为常量,减少 diff 比较的开销。

react增量式的diff算法:即通过将整个更新过程拆分成多个小任务,并利用调度器动态调整任务的优先级,从而实现更加灵活的更新控制。

React 的 diff 算法不仅考虑了节点的类型和属性,还考虑了节点的位置变化、子节点的顺序变化等情况,以实现更加精确的更新。

相关推荐

  1. 关于this指向react vue2 3 diff--后续补充

    2024-03-14 10:32:02       41 阅读
  2. 关于ReactV18页面跳转传参接收

    2024-03-14 10:32:02       27 阅读
  3. this指向

    2024-03-14 10:32:02       47 阅读
  4. ReactKeydiff

    2024-03-14 10:32:02       35 阅读
  5. vuethis指向问题

    2024-03-14 10:32:02       48 阅读
  6. 【nosql-redis】关于持久化补充

    2024-03-14 10:32:02       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-14 10:32:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-14 10:32:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-14 10:32:02       87 阅读
  4. Python语言-面向对象

    2024-03-14 10:32:02       96 阅读

热门阅读

  1. 前端面试题 ===> 【CSS】

    2024-03-14 10:32:02       33 阅读
  2. PyTorch 多个网络反向传播时出现梯度计算错误

    2024-03-14 10:32:02       41 阅读
  3. 计算机网络——分组延时、丢失和吞吐量

    2024-03-14 10:32:02       41 阅读
  4. Oracle Linux 8.9 安装 Postman

    2024-03-14 10:32:02       41 阅读
  5. 【OpenCV实战】基于OpenCV的传统手势识别流程详解

    2024-03-14 10:32:02       40 阅读
  6. 跨域的几种方式?(详解)

    2024-03-14 10:32:02       43 阅读
  7. ChatGLM3 源码解析(五)

    2024-03-14 10:32:02       31 阅读
  8. Apache Spark 的基本概念和在大数据分析中的应用

    2024-03-14 10:32:02       44 阅读
  9. 项目使用jdk17启动报错

    2024-03-14 10:32:02       45 阅读
  10. 原型和原型链的区别,__proto__和prototype的区别

    2024-03-14 10:32:02       39 阅读
  11. Go语言的自给自足:编译自身的神奇之旅

    2024-03-14 10:32:02       45 阅读
  12. 【Docker】Tensorflow 容器化部署

    2024-03-14 10:32:02       42 阅读