面向对象编程思想
一、面相过程:注重解决问题的步骤,分析问题需要的每一步,实现函数依次调用;
二、面相对象:是一种程序设计思想。将数据和处理数据的程序封装到对象中;
三、面相对象特性: 抽象、 继承、封装、多态
优点:提高代码的复用性及可维护性;
对象
Javascript 是一种基于对象的语言,几乎所有东西都是对象;
1、对象创建方法:
- 字面量创建
- new Object()创建
- Object.create()创建:创建对象的原型;
工厂模式
一、工厂模式
工厂模式解决了代码复用的问题;
//将不同对象所具有的重复的属性抽离成一个person工厂
function Person(name,age,hobby){
let obj={};
obj.name=name
obj.age=age
obj.hobby=function(){
console.log(hobby)
}
}
//创建对象
let lisi = person('lisi',20,'喜欢篮球')
对象和类
一、对象:具体的某个事物;(如:小明、叮当猫)
二、类:一类事物的抽象;(如:人类、猫类)
new运算符
- new的特点:1.new执行函数 2.自动创建空对象; 3.this绑定到空对象;4 隐式返还this;5.
- 通过new来改造工厂模式
所以上述那个例子,可以通过new person(args…)来构建对象
let lsi = new Person(('lisi',20,'喜欢篮球')
构造函数
- 构造函数要通过new来调用 this指向实例化对象
- 约定俗成构造函数首字母大写
- 静态属性及方法
Person.num=0 //为构造函数添加静态属性;添加静态方法同理,这些内容和构造的对象实例无关,仅属于person类。
- 静态方法里的this;
##构造函数性能
- js提供了公共空间可以存放公共方法,对于所有实例中相同的方法或者属性,可以存放在prototype中,如:
Person.prototype.hobby=function(){
console.log('喜欢篮球')
}
这样不论有多少实例,这一共同属性都不会再开辟新的内存,而存储在同一个内存空间中。
另外:
实例对象的原型打印出来是__proto__,但是实际上和构造函数的原型是同一个东西,只不过形式不同。
zhangsan.__proto__ === Person.prototype --> true
prototype原型
- 通过new实例化出来的对象其属性和行为来自两个部分,一部分来自构造函数,另一部分来自原型。
- 当声明一个函数的时候,同时也申明了一个原型 。
- 原型本身是一个对象。
- 对象属性方法查找规则;
工厂模式对比构造函数
1.但是却没有解决对象识别的问题。即创建的所有实例都是Object类型。(不清楚是哪个对象的实例)
2.没有原型,占用内存。
原型链
对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,称之为原型链;
1.当访问一个对象的属性或方法时,会先在对象自身上查找属性或方法是否存在,如果存在就使用对象自身的属性或方法。如果不存在就去创建对象的构造函数的原型对象中查找 ,依此类推,直到找到为止。如果到顶层对象中还找不到,则返回 undefined。
2.原型链最顶层为 Object 构造函数的 prototype 原型对象,给 Object.prototype 添加属性或方法可以被除 null 和 undefined 之外的所有数据类型对象使用。
构造函数继承
- 实现构造函数继承,可以利用三个函数,call\bind\apply,三个函数可以改变this指向
let obj={name:'zhangsan'}
fn = function(){console.log(this)}
fn.call(obj) //结果this为obj对象,可以同时传入fn需要的参数。
fn.apply(obj,[arg1,arg2])//apply和call作用一样,但是传其他参数需要传一个数组
fn.bind(obj)(arg1,arg2) //bind会返回一个新的函数,而不会执行,所以需要再执行一遍,fn需要的参数在第二个括号传入。
- 继承:子类继承父类所有属性和行为,父类不受影响。
- 目的:找到类之间的共性精简代码
function Person(name){
this.name = name;
this.eyes = "两只";
this.legs = "两条";
}
function Student(name){
Person.call(this,name)
this.className = "二班";
}
let newPerson = new Student("张三");
console.log(newPerson.className);
- 简单原型继承,出现影响父类的情况;
function Person(name){
this.name = name;
this.eyes = "两只";
this.legs = "两条";
}
function Student(name){
Person.call(this,name)
this.className = "二班";
}
Student.prototype = Person.prototype //直接赋值
原型的深拷贝继承
- 传值和传址问题
- 基本数据类型:Number、String、Boolean、Null、Undefined
- 复杂数据类型/引用数据类型:Array、Date、Math、RegExp、Object、Function等
- JOSN序列化的不足
如果拷贝对象包含函数,或者undefined等值,此方法就会出现问题
- 浅拷贝和深拷贝
//递归深拷贝
function deepCopy(obj){
let newObj = Array.isArray(obj)?[]:{}; //判断obj为数组还是对象
for(let key in obj){
if(obj.hasOwnProperty(key)){ //for in循环不仅会取出obj的属性,还会取出原型上的属性,所以需要判断。
if(typeof obj[key] == "object"){
newObj[key] = deepCopy(obj[key]); //是一个对象
}else{
newObj[key] = obj[key]; //是一个简单数据类型值
}
}
}
return newObj;
}
###原型的继承
- 深拷贝继承
- 组合继承
function Dad(){
this.name = "张三";
}
Dad.prototype.hobby = function(){
console.log("喜欢篮球");
}
function Son(){
Dad.call(this);
}
let F = function(){} //新建一个空的构造函数
F.prototype = Dad.prototype; //复制dad的原型
Son.prototype = new F(); // 覆盖son的原型,实例化F开辟一个新的内存地址
Son.prototype.constructor = Son; //给son的原型再添加上constructor
let newSon = new Son();
newSon.hobby();
包装对象
- 除过null,undefined,基本类型都有自己对应的包装对象:String Number Boolean
- 包装对象把所有的属性和方法给了基本类型,然后包装对象消失