箭头函数 instanceof和constructor ES6class面向对象 继承 闭包"/>
箭头函数 instanceof和constructor ES6class面向对象 继承 闭包
1.目录
1. 箭头函数
2. instanceof 和 constructor
3. es6 class 和 继承
4. 闭包
2.箭头函数 [重点]
格式–定义语法
// 箭头函数是匿名函数，一般做为参数传递
// let test = function (a,b){
// let sum = a + b
// return sum
// }
// let test = (参数) => {函数体}
// 几个小细节
// 1.如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return
// 2.如果只有一个参数，那么可以省略()
// 3.如果没有参数，()也不能省略
// let test = (a,b) => a + b // 不能有大括号
let test = a => a + 10 let res = test(100)
console.log(res)
特性
- 箭头函数自己没有this
- 箭头函数的this是确定的，况且永远不变
- 箭头函数中的this指向 创建这个箭头函数所在对象 的上下文
// 箭头函数自己没有this// 箭头函数的this是确定的，况且永远不变// 箭头函数中的this指向 创建这个箭头函数所在对象 的上下文let obj = {name: 'jack',say: function () {return () => {console.log(this) // obj}}}let fn = obj.say()fn() // obj {name: "jack", say: ƒ}let newobj = {}newobj.fun = fnnewobj.fun() // obj {name: "jack", say: ƒ}let rose = {name: 'rose'}fn.call(rose) // obj {name: "jack", say: ƒ} 无法改变
3.instanceof 和 constructor
判断一个实例是否属于某个构造函数
// 构造函数
function Person() {}
const p1 = new Person();console.log(p1 instanceof Person);
console.log(p1.__proto__.constructor === Person);
4.es6 class（重点）
es6的class 的出现 基本上可以替代了es5的构造函数和原型,使之代码结构上更加简洁。
关键字
- class
- 属性
- 方法
- 继承 extends
- 构造函数 constructor
- 方法重写 override：子类方法覆盖父类，super.父类方法()
- 父类的构造函数 super ：子类有构造方法且使用this前，必须使用super()
完整代码体验
class Person {// 构造方法constructor(name) {// 属性this.name = name;}// 方法say() {console.log(this.name);}
}
// 继承
class Student extends Person{constructor(name,height){// console.log(this); // 语法错误：必须先调用super()才能使用thissuper(name);this.height=height;}
}const s1=new Student("八神",180);
s1.say(); // 八神class Saler extends Person{constructor(name,age){super(name);this.age = age;}// 覆盖（重写）say(){// 访问父类方法super.say(); // 马云console.log(this.age);}
}const s2 = new Saler('马云',50);
s2.say(); // 50
Tab栏切换
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>tab栏切换</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.box {width: 400px;height: 300px;border: 1px solid #ccc;margin: 100px auto;}.hd {height: 45px;}.hd span {display: inline-block;/*将行内元素转换成行内块元素，宽高才起作用*/width: 90px;background-color: pink;line-height: 45px;text-align: center;cursor: pointer;}.hd span.current {/*交集选择器，标签指定式选择器*/background-color: purple;/*紫色*/}.bd li {height: 255px;background-color: purple;display: none;/*设置隐藏*/}.bd li.current {display: block;/*显示*/}</style><script src="js/TabExchange.js"></script>
</head><body><div class="box" id="box"><div class="hd"><span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span></div><div class="bd"><ul id="list"><li class="current">我是体育模块</li><li>我的娱乐模块</li><li id="li3">我是新闻模块</li><li>我是综合模块</li></ul></div></div><script>let tab = new TabExchange('box', 'current');console.dir(tab);</script></body></html>
class TabExchange {// 构造函数constructor(id, className) {// 获取id对应的元素：规范，属于最外层this.id = document.querySelector(`#${id}`)// 规定内部有两层解构：div>spanthis.hd = this.id.querySelectorAll('div>span')// 规范内部有两层解构：div>ul>lithis.bd = this.id.querySelectorAll('div>ul>li')// 保存当前要处理的样式类this.style = className;// 调用自己的tabClick 方法处理点击事件this.tabClick();}// 绑定点击事件tabClick() {// 因为接下来要绑定事件，事件里面也会出现this，所以先定义变量that来保存当前TabExchange对象的thislet that = this// 循环遍历，绑定事件，并进行事件处理this.hd.forEach(function (item, key) {// item就是span，key就是span的下标item.addEventListener('click', function () {// 排他：清空hd全部样式that.hd.forEach(function (item1) {item1.classList.remove(that.style)})// 清空bd的所有样式that.bd.forEach(function (item2) {item2.classList.remove(that.style)})// 给当前事件元素添加样式that.hd[key].classList.add(that.style)that.bd[key].classList.add(that.style)})})}}
元素创建继承
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.element {width: 200px;height: 200px;border-radius: 50%;border: 10px solid #00ffff;text-align: center;font-size: 30px;line-height: 200px;overflow: hidden;float: left;}
</style><body><script>// 创建一个类：可以创建普通元素，并且可以实现将元素挂到指定父元素下class CreateElement {// 构造函数，传入标签名，文本内容，和元素默认类名constructor(element, text, className = 'element') {// 1.创建元素const node = document.createElement(element)// 2.添加类名node.classList.add(className)// 3.添加文本内容（双标签有效，单标签无效）node.innerText = text// 4.将创建的元素节点存入到属性nodethis.node = node}// 将当前创建的元素 添加到指定父元素下appendTo(selector) {// 获取父元素const parent = document.querySelector(selector)// 添加子元素parent.appendChild(this.node)}}// 直接创建一个普通元素const div = new CreateElement('div', '做人开心就好')div.appendTo('body')// 图片标签不适用于普通元素创建（有属性src），但是想使用默认的样式和创建过程// 创建子类 继承 父类class CreateImg extends CreateElement {// 自己的构造函数：只需要传入图片constructor(src, className = 'element') {// 父类构造函数super('img', '', className)// 给创建的元素增加src属性this.node.src = src}}// 改变了创建的内容，但是可以直接应用父类继承的方法const img = new CreateImg('images/02.jpg')img.appendTo('body')</script>
</body></html>
5.闭包
概念
在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），只要出现引用了外部变量的函数,那么这个现象就叫做闭包
闭包：closure，一个函数内部的函数使用了外部函数的变量，导致外部函数虽然运行结束，但是内部依然得不到内存释放（狭义的闭包：面试官希望听到的结果）
作用
- 让数据变得更加的安全
- 优化代码 xx
- 函数内返回了另外一个函数
使用闭包前
<body><button>自增</button><h1></h1><script>const btn = document.querySelector("button");const h1 = document.querySelector("h1");let num = 0;let arr = [{ name: "金" }, { name: "木" }, { name: "水" }, { name: "火" }, { name: "土" }];h1.innerText = arr[num].name;btn.onclick = function () {num++;if (num >= arr.length) {num = 0;}h1.innerText = arr[num].name;}</script>
</body>
使用闭包后
<body><button>自增</button><h1></h1><script>const btn = document.querySelector("button");const h1 = document.querySelector("h1");function setElements() {let num = -1;let arr = [{ name: "金" }, { name: "木" }, { name: "水" }, { name: "火" }, { name: "土" }];return function () {num++;if (num >= arr.length) {num = 0;}return arr[num].name;}}const getElement=setElements();h1.innerText = getElement();btn.onclick = function () {h1.innerText = getElement();}</script>
</body>
更多推荐
箭头函数 instanceof和constructor ES6class面向对象 继承 闭包
发布评论