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 算法不仅考虑了节点的类型和属性,还考虑了节点的位置变化、子节点的顺序变化等情况,以实现更加精确的更新。