1.1面向对象特点
封装:将对象属性行为封装起来
继承:可以继承父亲的
多态:可以有多种状态多种行为
更容易维护,复用,低耦合
2 .1对象和类
1.一个具体的事物,看得见摸得着的。
在js中是一组相关属性方法的集合。有属性方法组成。
2.类是指泛指的,抽取了对象的公共部分。
2 .2创建类
声明:class Name{}
创建:new Name()
构造函数:constructor,实例化对象用的
<script>
// 语法
class People{
constructor(user){
this.user = user;
}
eat(food){
console.log(this.user + "吃饭" + food);
}
}
// 声明对象
var mingda = new People("handsome");
console.log(mingda.user);
var dada = new People("ugly");
dada.eat("粑粑");
</script>
2 .3类的继承
<script>
class Father{
constructor() {
}
money() {
console.log(100);
}
}
class Son extends Father{
constructor() {
}
}
var son = new Son();
son.money();
</script>
2 .4super关键字
<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) {
// this.x = x;
// this.y = y
// 继承父亲的构造函数
super(x, y);
}
}
var son = new Son(11, 22);
// 这个时候不会输出儿子的算术和,因为sum调用的是父亲自己的x,y
// 所以报错,这时候我们需要加super关键字
// 如果父子同名函数,儿子会优先找自己的函数,加入super也是会继承父亲的函数
son.sum();
</script>
3.1注意点
1.定义类后才能实例化
2.类里的属性和方法要加this
4.1构造函数和原型
1.构造函数
用来声明对象类。
<script>
function People(name) {
this.name = name;
}
var ldh = new People("刘德华");
</script>
实例成员:构造函数内部通过this添加的。通过对象访问。
静态成员:在构造函数本身添加的。通过构造函数访问。
<script>
function People(name) {
this.name = name;
}
var ldh = new People("刘德华");
// 实例成员
console.log(ldh.name);
// 静态成员,只能通过构造函数访问
People.age = 18;
console.log(People.age);
</script>
2.原型
js里规定了,每一个构造函数都有个原型prototype对象
可以把不变的方法,放在原型对象上,不同的对象实例就不需要开辟新的空间。
<script>
function People(name, age) {
this.name = name;
this.age = age;
// this.sing = function() {
// console.log('我会唱歌');
//}
}
People.prototype.sing = function() {
console.log('hello');
}
var ldh = new People('ldh', 17);
var zxy = new People('zxy', 18);
// 如果两个实例对象调用sing方法,内存会开辟两个空间存放不同对象的sing()
// 这样我们会浪费空间,就把他放入原型对象里,共享方法
ldh.sing();
zxy.sing();
// 找到原型的构造函数
console.log(People.prototype.constructor); </script>
三者之间的关系
call函数
<script>
function fn() {
console.log("hello");
console.log(this.name);
}
var o = {
name: "d"
};
// 使用call调用函数
// fn.call();
// 改变this指向,所以在函数里的this就是o
fn.call(o);
</script>
5.1继承
当我们以前的时候,没有类这个概念,那我们如何借用父构造函数来继承属性呢?
<script>
function Father(user, age) {
this.user = user;
this.age = age;
}
Father.prototype.moeny = function() {
console.log(11000);
}
// 把父亲的this改为子的this
function Son (user, age) {
Father.call(this, user, age)
}
// 如果继承父亲原型的方法,需要做以下操作
Son.prototype = new Father();
// 上部操作会改变son的构造函数,需要改回来
Son.prototype.constructor = Son;
var son = new Son("ldh", 19);
console.log(son);
son.moeny();
</script>