1. 程序设计的方法

常见的设计方法有面向流程与面向对象。

1.1 面向过程

以程序的过程为中心，采用自定而下逐步细化的方法来实现。常见的面向过程语言有 C

image.png

1.2 面向对象

将对象作为程序的基本单元，将程序分解为数据和操作的集合

image.png

1.3 面向对象编程的概念

一个对象通常可以由3个部分组成，分别是对象名（标识）、属性（静态特征）和操作（方法，动态特征）

• 类（Class）
  类是具有相同属性和相同操作的对象的集合。
  每个对象都是类的一个实例。
  类通常由3部分组成，分别是类名、属性和操作（方法）。
  类一般都有实例，没有实例的类叫抽象类。抽象类相当于一个模版，由具体的类去继承和实现，抽象类的子类必须覆盖抽象类的所有方法之后才能被实例化，否则还是抽象类。

• 对象（Object）

• 类与对象的区别
  类是抽象的概念，仅仅代表事物的模板，比如说“女朋友”、“男朋友”。
  对象是一个能够“看得到，摸得着的”具体的实体，比如石榴姐。
  类是一个对象集合，是根据问题域抽象得来的，对象就是类的实列化，是一个有血有肉的个体。例如，鱼类是抽象的，金鱼就是这个类的一个对象。

class dog   //狗的类 有属性和方法
    {
        public string name;
        public void bark()
        {
            Console.WriteLine("汪汪，我的名字叫"+name);
        }
    }
            dog a = new dog();    类实例化---狗a（对象）
            a.name = "旺财";
            a.bark();

• 属性（Property）

• 方法（Method）

1.4 面向对象的三个基本特征是：封装、继承、多态

image.png

• 封装

• 继承

• 多态
  在js中不能直接实现函数的重载,利用arguments实现重载

function test1() 
{ 
var text=""; 
if(arguments.length==1) 
{ 
//调用一个参数的方法 
} 
else if(arguments.length==2) 
{ 
//调用两个参数的方法 
} 
else { //其他的方法 
} 
}

2.JavaScript 面向对象

2.1 构造器（constructor）

对象的构造器，也可称之为构造类型

• 系统定义好的

var o = new Object();
var a = new Array();
var d = new Date();
| |
object constructor
// 使用直接量创建
var o = {name: 'Xinyang'};
var a = [1, 2, 3];

• 自定义构造器

// constructor
function Person(name, age, birthdate) {
      this.name = name;
      this.age = age;
      this.birthdate = birthdate;
      this.changeName = function(newAge) {
            this.age = newAge;
      }
}
// 创建对象
var X = new Person('Stupid', 13, new Date(2015, 01, 01));
var Q = new Person('Q', 12, new Date(2015, 01, 01));
X.changeName('X');

• 创建构造器的方法（3 种）

//1)构造函数模式。
        function Person(name, job) { 
             this.name = name 
               this.job = job 
               this.sayName = function() { 
                  console.log(this.name) 
              } 
        } 
        var person1 = new Person('Jiang', 'student') 

//2）工厂模式
function createPerson(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    }
    return o;
}
var person1 = createPerson("zhangsan",29,"soft engineer");
var person2 = createPerson("lisi",30,"hardware engineer");

//3）原型模式
function Person(){}
Person.prototype.name="小米";
Person.prototype.showName=function(){
          alert(this.name);
}
var person1=new Person();
person1.showName();
缺点：属性共享

//4）混合模型
构造函数模式定义实例属性，而原型模式用于定义方法和共享的属性
function CreatePerson(name){
this.name=name;
}
CreatePerson.prototype.showName=function(){
        alert(this.name);
}
var p1=new CreatePerson('小白');
p1.showName();
var p2=new CreatePerson('小绿');
p2.showName();

2.2原型继承

function Super(){
    this.name="小明";
}
Super.prototype.sayName = function(){
    console.log(this.name)
};

function Sub(){}
Sub.prototype = new Super();
var instance = new Sub();
instance.sayName();//小明

原型链继承的问题
当超类中包含引用类型属性值时，其中一个子类的多个实例中，只要其中一个实例引用属性只发生修改一个修改，其他实例的引用类型属性值也会立即发生改变,值类型修改不影响

 function Super(name){
        this.name=name;
        this.friends = ['小红','小强'];
    }
    Super.prototype.sayName = function(){
        console.log(this.name)
    };
    function Sub(){}
     
    Sub.prototype = new Super("小明");
    var instance1 = new Sub();
    var instance2 = new Sub();
    instance1.friends.push('张三');
    instance1.name="benben"
    console.log(instance1.friends);//["小红", "小强", "张三"]
    console.log(instance2.friends);//["小红", "小强", "张三"]
    console.log(instance2.name);//小明

无法实现多继承，即只能继承Super不能继承其他

2.3 构造函数继承

解决子类实例共享父类引用属性的问题
可以实现多继承（call多个父类对象）

function Super(){
      this.name="小明";
    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};
function Sub(){
    Super.call(this);
}
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]

存在的问题
只能继承父类的实例属性和方法，不能继承原型属性/方法

function Super(){
      this.name="小明";
    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};
function Sub(){
    Super.call(this);
}
var instance1 = new Sub();
instance1.sayName ()  //instance1.sayName is not a function

function Super(){
      this.name="小明";
    this.friends = ['小红','小强'];
  this.TellName = function(){
    alert(this.name)
};
}
Super.prototype.sayName = function(){
    alert(this.name)
};
function Sub(){
    Super.call(this);
}
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]
instance1.sayName ()  //instance1.sayName is not a function
instance1.TellName();

2.4组合式继承（原型继承+借用构造函数继承）常用方法

多了一个 Sub.prototype = new Super();
可以继承实例属性/方法，也可以继承原型属性/方法
不存在引用属性共享问题

        function Super(){
            this.name="小明";
            this.friends = ['小红','小强'];
        }
        Super.prototype.sayName = function(){
            alert(this.name)
        };
        function Sub(){
            Super.call(this);
        }
         
        Sub.prototype = new Super();
        var instance1 = new Sub();
        var instance2 = new Sub();
        instance1.friends.push('张三');
        console.log(instance1.friends);//["小红", "小强", "张三"]
        console.log(instance2.friends);//["小红", "小强"]
        instance1.sayName();//小明
        instance2.sayName();//小明

存在的问题

2.5寄生式继承

function createAnother(original){
    var clone = Object(original);//创建一个新对象，original的副本
    clone.sayName = function(){ //对象的增强，添加额外的方法
        alert('hi');
    }
    return clone;
}
var person = {
    name:'小明',
    friends:['小红','小强']
}
var person1 = createAnother(person);
var person2 = createAnother(person);
person1.friends.push('张三');
console.log(person.friends);//["小红", "小强", "张三"]
console.log(person1.friends);//["小红", "小强", "张三"]
console.log(person2.friends);//["小红", "小强", "张三"]

存在的问题

寄生组合式继承

function inheritPrototype(sub,superr){
var prototype = Object.create(superr.prototype);//ES5中创建对象副本的方法
    prototype.constructor = superr; //弥补重写原型失去的默认constructor属性
    sub.prototype = prototype;
}
function Super(name){
    this.name = name;
    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name);
}
function Sub(name){
    Super.call(this,name);
}
inheritPrototype(Sub,Super);
var person1 = new Sub('小明');
var person2 = new Sub('小华');
person1.friends.push('张三');
console.log(person1.friends);//["小红", "小强", "张三"]
console.log(person2.friends);//["小红", "小强"]
console.log(person1.sayName());//小明
console.log(person2.sayName());//小华

2.7Class继承

• class构造对象

class Student {
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('Hello, ' + this.name + '!');
    }
}
var xiaoming = new Student('小明');
xiaoming.hello();

• class继承

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }
  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

https://blog.csdn.net/weixin_40184249/article/details/80709949