JS-OOP
面向对象编程 oop
面向过程 pop
面向对象
以功能对象划分问题
优点 缺点
面向对象 灵活,复用,维护[大型项目] 性能低
VS
面向过程 效率{性能}高[偏底层、硬件] 没有面向对象灵活、复用、维护
类和对象
泛指————类
具体————对象
面向对象思维特点:
1:抽取对象公用的属性和行为组织成一个类
2:对类进行实例化,得到一个具体的实例\对象
对象
属性:事物的特征 名词
方法:事物的行为 动词
ES5 构造函数和原型
[1]对象直接量
var cat = {
name:'zhangsan',
age:18
}
[2]new Object() 构造函数
var obj = new Object();
[3]自定义构造函数
function Cat(){
this.color = 'black';
}
Con:
构造函数,本质上是一种特殊函数,主要用来创建对象,总是 new 一起使用。
构造函数:建议,首字母大写。
new Array();
-不需要return this;
-return 10; 语句无效
-return 引用类型;会生效
ex: return {}; ---会返回空对象
ex:
function Student(name,age){
//name、age:成员属性\组成部分
this.name = name;
this.age = age;
this.study = function(){
console.log('day day up');
}
}
var zs = new Student('zs',18);
console.log(zs.name);
zs.study();
var ls = new Student('ls',18);
构造函数内部:通过this添加的成员,实例成员
-访问实例成员,对象.成员
Student.nation = 'China'; ---静态成员
-不支持对象访问
-只能通过 构造函数去访问
-同理,实例成员,不支持构造函数访问
【公共属性】
原型定义的函数:支持共享[所有实例都可以访问]
总结:
this.对象,实例成员,特点:私有
xx.prototype.XX 原型,特点:所有实例对象共享
每个对象都会有一个属性 __proto__(非标准属性),指向构造函数的prototype原型。
构造函数的原型prototype === 生成对象的.__proto__
原型链查找机制
继承:
1:call()
[1]实现函数调用
function fun(){}
fun(); ===》 window.fun() ===》 默认是 window对象
[2] fun.call(obj)
改变默认this对象;
注意:始终放在第一位。
ex: fun.call(obj,a,b);
[3] 应用
function Fa(name, age) {
console.log(this);
this.name = name;
this.age = age;
}
function Son(name, age) {
Fa.call(this, name, age);
}
Constructor:
原型对象————Student.prototype
-Student.prototype.constructor ====> 定义的构造函数
-构造函数this指的是实例对象
-原型对象中this指的也是实例对象
扩展数组方法:求和------?不支持这种写法
-Array.prototype = {
constructor:Array,
add:function(){
var sum = 0;
for(var i=0;i<this.length;i++>){
sum+=i;
}
return sum;
}
}
-Array.prototype.add = function(){
var sum = 0;
for(var i=0;i<this.length;i++>){
sum+=i;
}
return sum;
}
原型链:
对象.__proto__()
构造函数.prototype()
继承:
对象原型————实例化对象的 zs.__proto__
关键步骤:
Son.prototype = new Fa('mcaro', 25);
Son.prototype.constructor = Son;
ES6的类{只是语法糖改变,本质不变}
class Student{
constructor(name,age){
this.name = name;
this.age = age;
}
//属于原型层面定义
study(){
}
}
var zs = new Student('macro',24);
ES6继承:
在继承中,实例化子类,
ES6类的使用细节:
【1】class定义类,没有变量提升————必须先定义,后实例化
【2】构造函数中的 this ———— 实例对象 {同理,方法中的this亦然}
构造函数原型应用
Array.prototype = {
constructor: Array,
add: function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
},
sub: function() {
},
};
Array.prototype.getSum = function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
var arr = [1, 2];
console.log(arr.getSum());
class Fa {
constructor(name, age) {
this.name = name;
this.age = age
}
FamRule() {
console.log("正向正念");
}
}
class Son extends Fa {
//重写;默认自动调用
constructor(name, age) {
super();
this.name = name;
this.age = age
}
}
var son = new Son('macro', 25);
son.FamRule();
console.log(son.name, son.age);
function Fa(name, age) {
this.name = name;
this.age = age;
this.compairor = function() {
console.log("事业家庭平衡");
};
};
function Son(name, age) {
Fa.call(this, name, age);
}
Fa.prototype = {
constructor: Fa,
family: function() {
console.log('家风正清');
},
educate: function() {
console.log('传承,发扬');
}
};
//而且,这里不是新建,而是引用!
Son.prototype = Fa.prototype;
Son.prototype.innovate = function() {
console.log('创新,创造');
};
Son.prototype.empair = function() {
console.log('全球化,保持清醒,悲观战略,乐观执行');
};
//构造函数——注意区别
function Fa(name, age) {
this.name = name;
this.age = age;
this.compairor = function() {
console.log("事业家庭平衡");
};
};
function Son(name, age) {
Fa.call(this, name, age);
}
Fa.prototype = {
constructor: Fa,
family: function() {
console.log('家风正清');
},
educate: function() {
console.log('传承,发扬');
}
};
//而且,这里不是新建,而是引用!
//Son.prototype = Fa.prototype;
//充分利用原型链实现继承关系
Son.prototype = new Fa('mcaro', 25);
Son.prototype.constructor = Son;
Son.prototype.innovate = function() {
console.log('创新,创造');
};
Son.prototype.empair = function() {
console.log('全球化,保持清醒,悲观战略,乐观执行');
};