7-JS基础进阶

两大编程思想:面向对象,面向过程

• 面向过程POP
  • 分析解决问题的步骤,然后用函数一步步实现, 使用时再一步步调用就可以了
  • 性能比面向对象高(亲力亲为) 适用于针对某一个功能
• 面向对象OOP
  • 将事物分解成一个个对象,然后由对象之间分工合作,一个对象实现一个功能
  • 面向对象是以对象功能来划分问题,而不是步骤
  • 易维护,易复用,易扩展
  • 将共通的一个个功能封装起来, 不同的实例对象使用功能时可以选择不同的用法,适合开发大型项目
  • 面向对象三大特性:封装性,继承性,抽象性(多态性)
    • 多态性: 实例对象每次使用某个功能都可以是不同的

new的四大步骤

1. new构造函数会创建一个空对象
2. this会指向刚创建的构造函数
3. 执行构造函数会给新的对象添加属性和方法
4. 返回值给这个对象(一般用一个变量来储存)

类class

• 对象是特指某一个,通过实例化具体的对象
• 类抽象了对象的公共部分,它泛指某一大类
• 实例化对象是一类具体的事物

创建类和对象

//1.创建实例类 class
class Star {
   
	constructor(uname,age) {
   
		this.uname = uname;
		this.age = age;
	}
	sing(song) {
   
		console.log(this.uname + song)    //刘德华冰雨
	}
};
//2.利用类创建实例对象  new   Star(传递的数据)
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
ldh.sing('冰雨');

1. 通过Class 关键字来创建类 , 类名习惯用首字母大写

2. 类里面有个constructor 函数,可以接收传递过来的参数,同时返回实例对象

3. constructor 函数 只要new生成实例时,就自动调用这个函数 , 不写这个函数, 类也会自动生成这个函数

   kan si zhua ke te

4. 生成实例 new 不能省略

5. 创建类 类名后面不加小括号 ,而生成实例 类名后面要加小括号,类里面构造函数不需要加function

6. 多个函数之间不需要添加逗号分隔

7. 实例类里面使用共有的属性和方法,前面一定要加this使用

8. ES6没有变量和函数提升,所以必须先定义类,才能通过类实例化对象.

类的继承 extends

class Son extends Father {
   
	constructor(x,y) {
     
		super(x,y)    //要写在第一行   //执行父类构造函数
	}
}
var son = new Son(1,2)
console.log(son)  //直接输出被继承的子类可以获取父类所有的属性

• 通过extends 子类可以继承父类的一些属性和方法 例: Son. 父类方法名
• super关键词可以调用父类的constructor并将子类参数传递过去
  • super.父类普通函数名() 子类中通过可以调用父类的普通函数
  • 子类构造函数中使用super关键字必须写在this前面
• 继承中,同名父类和子类的属性和方法,先采用子类的,就近原则

this 的指向问题

• constructor里的this 指向的是实例对象 , 方法里面的this 指向是的它的调用者
• 在某些特殊情况(事件,定时器…),this指向的不是constructor的this,可以设置一个全局变量 来保存constructor的this,然后用这个变量即可(后续学了箭头函数可以直接使用this指向constructor的this)

构造函数(constructor构造器)

• 构造函数是一种特殊的函数,用来初始化对象(封装对象),可以重复不同对象相同的属性或行为
• 构造函数用于创建某一类对象,首字母要大写
• 构造函数要和new一起使用才有意义
• 普通函数都是对象创建的,实例对象可以通过constructor查看是哪个构造函数创建的

function Star(uname,age) {
   
	this.uname = uname;
	this.age = age;
	this.sing = function() {
   
		console.log('我会唱歌')
	}
}
//实例对象
var ldh = new Star("刘德华",18)
实例成员通过实例对象来访问
ldh.sing()
//构造函数添加静态成员
Star.sex = '男';
//静态成员通过构造函数来访问
console.log(Star.sex)

实例成员和静态成员

• 构造函数中的属性和方法称为成员

1. 实例成员 : 构造函数内部前面带有this的属性和方法
   • 实例成员只能通过创建的实例对象来访问,不能通过构造函数来访问
2. 静态成员 : 构造函数本身添加的属性或方法 (函数名.属性=值)
   • 静态成员只能通过构造函数来访问,不能通过实例对象来访问
3. static 方法 在类中修饰成静态成员 使用时直接构造函数名. 调用就行 不用实例化对象调用

原型对象prototype

• 每次创建实例都会重新开辟空间保存里面的方法,如果方法一致的话,没必要浪费内存来做同样的事.
• 每个构造函数都有prototype属性,实际上就是一个对象,它的所有属性和方法都会被构造函数拥有
• 我们可以把不变的方法放入原型对象中,这样所有的对象实例都可以共享这些方法
• 一般公共的属性放入构造函数中,公共的方法放入原型对象中

//Star 构造函数  sing要创建的方法  
Star.prototype.sing = function() {
   
	console.log("你会唱歌")
}
ldh.sing()       //prototype原型对象写在构造函数同级

对象原型proto

ldh.__proto__  	 //和prototype是等价的   ldh是实例对象

• 对象身上系统会自动添加这个属性指向构造函数的原型对象prototype (只要是对象就会有proto)
• 方法的查找规则:首先查看实例对象上是否有某个方法,如果有就执行. 没有就通过这个属性去原型对象pro