整合篇整体内容比较多，会一直更新更新
一、JavaScript面向对象
1.1 两大编程思想
分为面向过程和面向对象
2、ES6中的类和对象两种编程思想是根据不同的程序需要来选择的，
比较简单的还是推荐使用面向对象来写，因为实现的步骤要更加简单一些。
如果项目比较大，需要多人合作的，则选择面向过程，因为便于维护和复用。
<script>
// 1. 创建类 class 创建一个 明星类
class Star {
constructor(uname) {
this.uname = uname
}
}
// 2. 利用类创建对象 new
var ldh = new Star ('刘德华')
console.log(ldh.uname)
</script>
<script>
// 1. 创建类 class 创建一个 明星类
class Star {
constructor(uname) {
this.uname = uname
}
}
// 2. 利用类创建对象 new
var ldh = new Star ('刘德华')
var zxy = new Star ('张学友')
console.log(ldh.uname)
console.log(zxy.uname)
</script>
<script>
// 1. 创建类 class 创建一个 明星类
class Star {
constructor(uname,age) {
this.uname = uname
this.age = age
}
}
// 2. 利用类创建对象 new
var ldh = new Star ('刘德华',18)
var zxy = new Star ('张学友',20)
console.log(ldh) // 输出对象的所有属性
console.log(zxy)
</script>
1.我们类里面所有的函数不需要写function
2.多个函数方法之间不需要添加逗号分隔
<script>
// 1. 创建类 class 创建一个 明星类
class Star {
constructor(uname,age) {
this.uname = uname
this.age = age
}
sing(song){
// console.log('我唱歌')
console.log(this.uname + song)
}
}
// 2. 利用类创建对象 new
var ldh = new Star ('刘德华',18)
var zxy = new Star ('张学友',20)
console.log(ldh)
console.log(zxy)
// 1.我们类里面所有的函数不需要写function
// 2.多个函数方法之间不需要添加逗号分隔
ldh.sing('冰雨')
zxy.sing('李香兰')
</script>
<script>
// 1.类的继承
class Father {
constructor(){
}
money(){
console.log(100)
}
}
class Son extends Father {
}
var son = new Son()
son.money()
</script>
<script>
class Father {
constructor(x,y){
this.x = x
this.y = y
}
sum(){
console.log(this.x + this.y)
}
}
class Son extends Father {
constructor(x,y){
super(x,y) // 调用父类中的构造函数
}
}
var son = new Son(1,2)
var son1= new Son(11,22)
son.sum()
son1.sum()
</script>
<script>
// super 关键字调用父级普通函数
class Father {
say(){
return '我是父级'
}
}
class Son extends Father {
say() {
// console.log('我是子级')
console.log(super.say())
// super.say() 就是调用父级中的普通函数 say()
}
}
var son = new Son()
son.say()
// 继承中的属性或者方法查找原则:就近原则
// 1.继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
// 2．继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则）
</script>
<body>
<button>点击</button>
<script>
class Star {
constructor(uname,age) {
this.uname = uname
this.age = age
// 2．类里面的共有的属性和方法一定要加this使用.
// this.sing()
this.btn = document.querySelector('button')
this.btn.onclick = this.sing
}
sing() {
console.log(this.uname)
}
}
// 1．在 ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
var ldh = new Star('刘德华')
</script>
该方法网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
二、构造函数和原型
三、函数进阶
四、正则表达式
五、ES6
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）