<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>class语法</title>
</head>
<body>
<!--
除了JS语言之外, 其他编程语言 以JAVA为首, 都采用的是 class 语法来管理对象相关的操作
JS独创了原型设计
呼声: 从其他语言中转型到JS语言的程序员, 希望JS能引入class语法来管理对象
JS 在ES6的新特性中增加了 class 语法
-->
<script>
// S的原型写法
function Test(a, b) {
// let this = {}
this.a = a
this.b = b
// this.__proto__ = Test.prototype
// return this
}
//
Object.defineProperty(Test.prototype, 'show', {
value: function () {
console.log('我是show')
},
})
var a = new Test(10, 20)
console.log(a)
///
// class语法
// class中: 同时封装了构造函数 和 原型的方法
class Demo {
// 固定名称的属性: constructor
// new运算符, new Demo() 就会触发此固定名称的方法
constructor(a, b) {
this.a = a
this.b = b
}
// class语法中: 相关的原型方法直接写到此处即可
// 省略 function 前缀
show() {
console.log('我是show')
}
// 从其他语言转入的人: 都排斥 构造函数.prototype 的语法
talk() {}
ab() {}
cc() {}
}
// 可以认为: class语法 就是 原型写法的 语法糖
var d = new Demo(10, 20)
console.log(d)
// d.show: d中没有show, 则到原型中查找使用
d.show()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 静态属性: 就是对象的属性
// 遗憾: JAVA中没有下方这种语法
// var b = { name: 'MIKE' }
// console.log(b.name)
// console.log(b)
class a {
static name = 'MIKE'
static age = 29
}
// 相当于: JS的 {name:'MIKE', age:29}
// 但是JAVA的class语法, 需要用 static 标注
console.dir(a)
console.log(a.name)
console.log(a.age)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>继承</title>
</head>
<body>
<!--
面向对象开发的 三大特征: 封装 继承 多态
- 封装: 用{}把很多代码括起来,形成一个整体
- 继承: 在JS中就是原型链特征, 自己没有到原型中找
-->
<script>
var a = { name: 'MIKE', age: 33 }
console.log(a)
// 替换对象类型的原型
// set:设置 prototype:原型 of: ...的
Object.setPrototypeOf(a, Array.prototype)
// 把 a 的原型, 换成 Array.prototype
// 换原型的作用:
function sum() {
console.log('arguments:', arguments)
// 想用数组的高阶函数: reduce 计算
// arguments:的原型是 Object, 是伪数组, 没有高阶函数
// 原型换成数组的
Object.setPrototypeOf(arguments, Array.prototype)
var t = arguments.reduce((total, value) => total + value, 0)
console.log(t)
}
sum(12, 3, 23, 34, 45, 45, 6, 765)
</script>
<script>
// 创建对象类型时, 指定其原型
// create: 创建
// 一个普通对象在创建时, 指定其原型是谁
// new Array(); new Date(); -- 单一,专业
// create: 万能方式
var p = Object.create(Array.prototype)
var p = Object.create(Date.prototype)
p.age = 11
p.sex = 33
console.log(p)
</script>
<script>
// JAVA中: 类也可以指定 父类(原型)
class Father {
constructor() {
this.a = 3
}
show() {}
}
// extends: 继承 Father 类, Demo创建出的对象的原型, 就是Father创建的对象
// 方法在原型中存储, 属性会存到顶层对象里, 即 show 和 a 的差异
class Demo extends Father {}
// 继承: 父的东西 都会 传递给子使用
var d = new Demo()
console.log(d)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!--
面向对象的三大特征
1. 封装: {}把代码括起来, 形成一个整体 -- 例如 函数的{},对象的{}
2. 继承: 原型链特征 -- 自己没有的属性, 到原型__proto__中查找
-- 其他语言中: 爸爸的资源给了儿子用
3. 多态: 多种状态 -- 同样的方法 在 父子中触发, 效果不同,多种状态
-->
<script>
// 重写: 继承-子可以拥有父类所有的方法和属性, 但是子可以声明 同名的方法和属性, 来代替从父类继承的
class Father {
show() {
console.log('我是父类')
}
}
class Son extends Father {
// 重写: 父类中的方法, 在子类中声明同名方法, 则使用时优先用自身的重写方法
show() {
// 关键词: super -- 指定调用父类的方法
// 与this关键词对应, this代表当前对象
super.show() //打印出 : 我是父类
console.log('我是子类')
}
}
var s = new Son()
console.log(s)
s.show()
</script>
</body>
</html>