JavaScript面向对象编程

Posted 2020-10-18 KeepLearningEverday

一：创建对象的模式　

　1工厂模式：用函数封装以特定的接口创建对象的细节。

function Person(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sayName = function(){
        alert(this.name)}                
    return obj;
}
let P1=Person("bob",22);
let P2=Person("Anna",21);

　　2 构造函数模式：在调用函数的时候如果不加new则为普通函数，如果加new则可视为对象

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName = function(){
        alert(this.name)};
}
let P1=new Person("bob",22);
P1.sayName();
let P2=new Person("Anna",21);
P2.sayName();
Person("George",23);//普通调用
window.sayName();//添加到window

let o=new Object;
Person.call(o,"Cristin",24)
o.sayName();

　　2.1寄生构造函数模式：

　　　　

function Person(name,age){
    let obj = new Object();
    obj.name=name;
    obj.age=age;    
    obj.sayName = function(){
alert(this.name);}
　　return obj;
}
//用于在特殊情况下来为对象创建构造函数。
function specialArray(){
let arr = new Array();
arr.push.apply(values,arguments);
arr.toPipedString = arr.join("|");
return arr;
}

 

　　3 原型模式：prototype,即在Person中的属性均为Person.prototype.name = name等代码，以下直接展示最常用的原型+构造函数模式

function Person(name,age){
    this.name=name;
    this.age=age;    
}
Person.prototype.sayName=fucntion(){
    alert(this.name);
}

let P1 = new Person("george",23);

P1.sayName()

　　3.1 动态原型模式：

function Person(name,age){
    this.name = name;
    this.age=age;
    if (typeof this.sayName != "function"){
        Person.prototype.sayName(){
            this.name;}}}

 

二 继承：

　　1 原型链继承

function SuperType(){
this.property=true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;}

function SubType(){
this.subproperty=false;
}

subType.prototype = new Supertype();

SubType.prototype.getSubValue = function(){
return this.subproperty;}

let s1 = new SubType();
s1.getSuperValue;//true
s1.getSubValue;//false



//原型式继承
function object(o){
function F(){//创建一个临时性构造函数
F.prototype=o;//传入参数作为该函数的原型
return new F();//返回该函数的实例，实际上该实例已经包含了参数的原型，复制了一遍。
}
//ECMA5中引入了Object.create（）的方法
var person ={
name:"Anna",
age:"20",
friend:["Mike","bob"]}
var p1=Object.create(person);
p1.name = "george";
p1.friend.push("Niclaos")
var p2=Object.create(person);
p2.name;//Anna 字符串为基本类型值，栈内存
p2.friend;//["Mike","bob","NIclaos"]数组时引用类型值，堆内存

　　2 借用构造函数继承

function SuperType(){
this.colors=["red","green","blue"];
}
function SubType(){
SuperType.call(this);//相当于创建了一个副本，所以相互不影响
}
let s1 = new SubType();
s1.colors.push("black");//["red","green","blue","black"]

let s2 = new SubType();
s2.colors;//["red","green","blue"]

　　3 组合继承：（原型链+构造函数）

　　

function SuperType(name){
this.name=name;
this.color=["red","green","blue"];
}
SuperType.prototype.sayName=function(){
alert(this.name);
}

function SubType(name,age){
SuperType.call(this,name);//继承SuperType属性,传一个name参数
this.age=age;
}

SubType.prototype = new SuperType;//继承方法

SubType.prototype.sayAge=function(){
alert(this.age);}

let s1 = new SubType( "Anna",23);
s1.sayName;//Anna
s1.sayAge;//23
s1.color//["red","green","blue"]

 

　　2 寄生式继承

function createAnother(original){
let clone =Object.create(original);//创建一个寄生的对象
//给对象一些增强型方法
clone.sayHi=function(){
alert("HI");};
返回这个对象
return clone;
}

var person={
name :"Anna",
age:"18"}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

 

　　3 寄生组合式继承（最常用）

function SuperType(name,age){
    this.name=name;
    this.age=age;}

SuperType.prototype.sayName=function(){
    alert(this.name);
    }

function SubType(name,age){
    SuperType.call(this,name,age);
    this.friend=["anna","bob"];
    }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//继承属性

SubType.prototype = Object.create(SuperType.prototype);//继承方法

SubType.prototype.constructor = SubType;　　　　　　　　　//重定向构造器

SubType.prototype.sayfriend=function(){
    alert(this.friend);};　　　　　　　　　　　　　　　　　　//增强方法
let s1=new SubType("George",21);
s1.constructor;//SubType
s1.sayName;//George
s1.sayAge;//21
s1.name;//George