2024大二上js高级+ES6学习9.13-9.14（含tab栏案例）

9.13

1.学习类的创建和利用类创建对象

2.学习往类中添加共有方法

3.学习类继承中extends和supper关键字

Extends关键字可以让子类继承父类中的属性和方法，super可以用于访问和调用父类中的构造函数和普通函数。现在是用super调用父类的构造函数，原因是父类中的方法的this指向父类构造函数所创建对象的this,而父类中的方法需要使用到this中的属性，因此要通过super关键字调在子类的构造函数中调用父类的构造函数，获取父类的实例对象中this的相关属性（要在使用子类的this之前调用父类的构造函数）

4.继承属性和方法遵循就近原则，优先使用子类的属性和方法

可以用super.父类普通函数（）调用父类中的普通函数

5.学习子类继承父类方法的同时拓展自己的方法

6.使用类的注意点

this.sing后面不需要加（）也会直接被调用，但是出现了只打印出空行没有打印出刘德，原因是当我在 HTML 元素上设置事件处理程序（如 this.btn.onclick = this.sing）时，当事件触发时，函数内的 this 指向的是该 HTML 元素，而不是 Star 类的实例。在 JavaScript 中，当你直接将一个对象方法赋值给 DOM 元素的事件处理程序（如 onclick）时，会出现 this 指向改变的情况，原因如下：

函数调用方式决定 this 指向(ai)

• 在 JavaScript 中，this 的值是在函数被调用时确定的。当你使用 obj.method() 这种方式调用函数时，函数内部的 this 指向 obj。但是当你把一个函数作为一个普通变量传递（例如赋值给一个 DOM 元素的事件处理程序）时，它就不再是以对象方法的形式被调用了。
• 对于 DOM 元素的事件处理程序，当事件触发时，事件处理函数是在 DOM 元素的环境中被调用的。从 DOM 元素的角度来看，它并不知道这个函数原本属于哪个对象，它只知道接收到了一个函数引用，所以在函数执行时，this 就指向了该 DOM 元素。
• 在上述代码中，当 button 被点击时，this.sing 函数被执行，但此时的执行环境是 button 元素，而不是 Star 类的实例。所以在 sing 函数内部，this 指向了 button 元素，而 button 元素没有 name 属性，所以输出为空或者在严格模式下会报错。

解决方法一：使用箭头函数，箭头函数的this指向上下文

解决方法二：加一个全局变量，存储Star实例对象的this

7.this的指向：

8.学习面向对象tab栏案例

：iconfont的使用：

将所需图标代码下载至本地

查看demo_index.html中的使用说明

注意修改引入文件的路径

▶对案例进行模块划分

▶init初始化操作使元素绑定响应事件

此时依然遇到this的指向问题

this.index是正确的，this.lis[i].index报错（在onclick中），function是由lis[i]调用的，而此前已经在lis[i]身上添加了index属性，值为i，此时function中的this已经变成了lis[i],不再是Tab的实例对象。

▶切换功能模块

解决toggleTab函数的this指向，使用外层立即执行函数包一个箭头函数

这也运用了闭包的特性（this的指向由事件触发元素变为类创建的实例对象）

1. 变量的持久化存储

• 在代码中，外层立即执行函数((index) => { return () => { this.toggleTab(index); }; })(i)形成了一个闭包环境。循环中的变量i作为参数传递给立即执行函数后，在立即执行函数内部，index的值会被保留下来。
• 当循环结束后，通常情况下循环变量i的值会被改变或者不再可用，但由于闭包的存在，每个立即执行函数内部的index值（也就是对应循环迭代时i的值）都被持久化存储了。
• 例如，在循环中，当i = 2时创建了一个立即执行函数，这个函数内部的index就保存了2这个值，即使循环继续执行，i的值发生了变化，但这个立即执行函数内部的index值依然是2。

2. 访问外部作用域的变量

• 闭包可以访问其外部函数作用域中的变量。在我们的例子中，内层的箭头函数() => { this.toggleTab(index); }能够访问到外层立即执行函数中的index变量。
• 并且，由于 JavaScript 中词法作用域的规则，内层函数可以记住外层函数的作用域链，即使外层函数已经执行完毕。
• 这里的外层函数就是立即执行函数，它执行完后，其内部的变量index依然可以被内层的箭头函数访问到，这就是闭包的重要特性之一。

3. 保持对 this 的引用

• 在 JavaScript 中，this的指向是动态的，但在闭包中可以保持对创建闭包时this的引用。
• 在类的方法中，this指向类的实例。当我们在循环中创建闭包时，闭包会捕获当前类实例的this，并在闭包内部保持对它的引用。
• 所以，当点击事件触发时，this.toggleTab(index)中的this仍然指向类的实例，而不是事件触发元素（如li元素）。这确保了在toggleTab方法中可以正确地操作类实例上的属性和方法，例如this.lis和this.sections。这体现了闭包能够保持特定上下文（即this的指向）的特性。

9.14

▶添加按钮模块

使用insertAdjacentHTML方法在ul的最后一个子元素后面添加新元素（内部）

解决添加新元素后切换功能失效的bug：在添加新元素后重新获取元素

▶删除功能模块

关于removeTab传入参数的顺序问题

 this.lis[index]&&this.lis[index].click()：短路判断

每次进行添加和删除元素的操作后都要重新获取元素，重新初始化相应元素的绑定事件

▶编辑功能模块

原文地址：https://blog.csdn.net/2401_84827689/article/details/142410340

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！