码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript面向对象编程

时间:2017-12-17 15:56:05      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:data   副本   object   cto   body   const   his   erp   style   

一:创建对象的模式 

 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

 

JavaScript面向对象编程

标签:data   副本   object   cto   body   const   his   erp   style   

原文地址:http://www.cnblogs.com/BigJ/p/8052135.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!