01继承
1.继承引入 - 是类与类之间的关系
子类继承父类子类就拥有父类的属性和方法【重点】
2.es5:继承语法
1.call函数继承-构造函数继承(继承属性)
在子类的构造函数中使用 父类构造函数的call函数实现继承
Person.call(this,name,age) //构造函数继承
原理: call函数改变this
2.继承原型属性方法
拷贝继承
父类原型上的属性和方法复制拷贝到子类原型对象上
遍历父类原型所有属性和方法，执行拷贝
3.原型链实现原型对象属性和方法->原型继承
4.构造函数继承+原型继承 = 组合继承
子类继承父类属性和方法包括原型对象上的
3.es6:继承语法
语法:
class 父类{
constructor(){
}
}
class 子类 extends 父类{ //继承
constructor(){
super() //调用父类构造器
//子类属性定义
}
}
let 子类实例 = new 子类()//父类
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.say = function () {
console.log(this.name, '说话');
}
let p1 = new Person('jack', 18)
console.log(p1.name, p1.age);
// p1.say()
//子类
function Student(name, age, num) {
Person.call(this, name, age) //构造函数继承
this.num = num
}
// Student.prototype.say = Person.prototype.say
//拷贝继承
for(let key in Person.prototype){
Student.prototype[key] = Person.prototype[key]
}
let s1 = new Student('jack', 18, 1001)
console.log(s1.name, s1.age, s1.num);
s1.say()
---------------------------------------------------------------------------
//父类
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.say = function () {
console.log(this.name, this.age,'说话');
}
//子类
function Student(name, age, num) {
Person.call(this, name, age) //构造函数继承
this.num = num
}
//原型链实现原型对象属性和方法->原型继承
Student.prototype = new Person()
let s1 = new Student('tom', 20, 1001)
s1.say()
----------------------------------------------------------------------------
class Person{
constructor(name,age){
this.name = name
this.age = age
}
say(){
console.log(this.name,this.age,'说话');
}
}
// let p1 = new Person('jack',18)
// p1.say()
//子类Student继承父类Person
// super()
class Student extends Person{
constructor(name,age,num){
super(name,age) //super表示调用父类构造器
this.num = num
}
}
let s1 = new Student('rose',20,1001)
// console.log(s1.name,s1.age,s1.num);
s1.say()02闭包
回顾函数
function fn(){
}
let fn1 = function(){
}
(function(){
})()
let fn2 = new Function()
1.函数执行空间 - 执行栈 | 调用栈
理解：函数作为复杂数据类型储存在堆区，调用的时候，在调用栈中将其复制运行，运行结束后，自动销毁。
2.函数不被销毁的空间
-函数体返回一个复杂数据类型，被外部使用，这时候，函数执行空间不被销毁
function fn(){
let num = 100
return {name:'jack'} //1.复杂数据类型
}
let f = fn() //2.外部使用[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XpWeGqnM-1669771465198)(D:\周sir\课件\week6-jquery\函数不被销毁的执行空间.png)]
闭包： 一种语法，函数的高级用法.
闭包形式成条件
1. 有函数嵌套
2. 内部函数使用外部函数私有变量
3. 内部函数被返回在外部使用
闭包作用:
1. 生成一个不被销毁的执行空间,
缺点: 引起内存泄露问题
特点: 形成块作用域
2. 外部函数可以访问内部函数的变量
作用域: 内部函数可以访问外部函数变量
3. 保护私有变量
优点： 可以把一些变量放在函数里面，不会污染全局
缺点： 要利用闭包函数才能访问，不是很方便
闭包写法:闭包三种写法：
方法1：
function fn1(){
var num = 1;
return function(){
console.log(num);
}
}
let f1 = fn1()
f1()
方法2：
let fun;
function fn(){
var num=2;
fun = function(){
console.log(num);
}
}
fn()
fun()
方法3：
let f3 = (function(){
var num=3;
return function(){
console.log(num);
}
})()
f3()03闭包题
//1.明星点赞
const liBtns = document.querySelectorAll('ul>li>button')
for (let i = 0; i < liBtns.length; i++) {
// let num = 0; //1.let块作用域
// function fn() { //2.闭包
// var num = 0;
// liBtns[i].addEventListener('click', function () {
// this.innerHTML = '点赞 ' + ++num;
// })
// }
// fn()
(function () { //2.2闭包第二种写法
var num = 0;
liBtns[i].addEventListener('click', function () {
this.innerHTML = '点赞 ' + ++num;
})
})()
}
//2.【考试题】
function getCounter(){
let counter = 0;
return function(){
return counter+=1
}
}
let f1 = getCounter()
console.log(f1()); //1
console.log(f1()); //2
console.log(getCounter()()); //1
console.log(getCounter()()); //1作业:
1. 预习jquery
2. 选项卡练习复习 (明天jquery实现)
3. todolist应用.log(f1()); //1 console.log(f1()); //2
console.log(getCounter()()); //1
console.log(getCounter()()); //1作业:
1. 预习jquery
2. 选项卡练习复习 (明天jquery实现)
3. todolist应用