js高级
1.面向对象
(1)面向过程和面向对象的区别
面向过程就是分析出解决问题需要的步骤,然后用函数按照步骤一步步实现,使用时在分别调用.
举个例子 按面向过程的方法解决把大象放进冰箱需要几部:第一步:打开冰箱 ;第二步:让大象进去;第三步:关上冰箱门.
面向对象就是把事务分解为一个个对象,然后对各个对象进行分析,由各个对象之间协作
举个例子 按面向对象方式分析大象冰箱问题.有两个对象:冰箱 和 大象.大象对象: 进去;冰箱对象:打开,关闭.
(2)两种方式的应用场景
面向对象的性能比面向对象强,适合跟硬件联系很亲密的东西,例如单片机就采用面向过程编程.但它没有面向对象易维护,易复用,易扩展.
面向对象有封装/继承/多态性,可以设计出高内聚低耦合的系统,是系统更灵活,更易于维护.缺点就是性能比面向过程低.
(3)小结
面向过程就像是一份蛋炒饭需要蛋和饭同时进行翻炒,而面向对象就像是一份盖浇饭,客人来了要什么菜,在现成的米饭上浇什么汤汁.
2.类的继承
类的继承的关键字是extends.
super 用于访问和调用父类的构造函数,也可用于调用父类的普通函数.
class Father {
constructor(uname) {
this.uname = uname;
}
}
class Son extends Father {
constructor(uname,age) {
super(uname);
this.age= age;
}
}
// 子类在构造函数中使用super时,必须要把super写在this 前面
// (必须先调用父类的构造函数,在使用子类构造方法)
3.对象原型和原型对象
(1)构造函数的原型对象:prototype
Javascript规定,* 每一个构造函数都有一个prototype属性*,指向另一个对象.这个prototype就是一个对象,这个对象的所有的属性和方法,都会被构造函数所拥有.所以我们可以直接把那些不变的方法,直接定义在proptotype对象上,这样对象的所有实例都可以共享这些方法.,
(2)实例的对象原型:proto
每个对象实例都会有一个__proto__属性指向构造函数的prototype对象的属性和方法,这就是为什么实例对象可以调用构造函数.__proto__和prototype是等价的.__proto__对象原型的意义就在于对象的查找机制提供一个方向,或者说一个属性,但由于它是非标准属性,因此实际开发中不可以使用这个属性,他只是内部指向原型对象prototype.
(3)constructor 构造函数
对象原型和原型对象都有一个属性constructor,被称为构造函数,因为它指回构造函数本身.它主要记录该对象引用了哪个构造函数,他可以让对象原型重新指向原来的构造函数.
一般情况下,对象的方法都在构造原型中设置.如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor就不在指向当前构造函数啦.此时,我们可以在修改后的原型对象中,添加一个constructor指向原来的构造函数.
(4)三者的关系:
(5)原型链
<script>
// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
Father.prototype.money = function() {
console.log(100000);
};
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
// Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
Son.prototype = new Father();
// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
Son.prototype.constructor = Son;
// 这个是子构造函数专门的方法
Son.prototype.exam = function() {
console.log('孩子要考试');
}
var son = new Son('刘德华', 18, 100);
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype.constructor);
</script>