前端面向对象编程之ES5语法ES6语法详解

function 函数(形参,形参...){
    const obj= {};
    //创建一个空对象
    obj.属性 = 属性;
    obj.属性 = 属性;
    ...
    设定对象的属性和属性值
    obj.函数方法 = function(){}
    obj.函数方法 = function(){}
    ...
        设定对象的函数方法
    return obj;
        返回值是这个创建的对象
}
/*
工厂模式 是 创建 属性和函数方法相同
属性值不同的 对象 
创建的对象 都 相同的属性 不同的属性值
还有 完全相同的函数方法
每一个对象都存储了完全相同的函数方法
 造成有 冗余的代码程序
*/

function 构造函数(形参,形参...){
//在构造函数中通过this指向设定操作对象的属性
   this.属性 = 形参;
   this.属性 = 形参;
}
//在构造函数外在构造函数的prototype中定义函数
构造函数.prototype.函数方法 = function(){}
构造函数.prototype.函数方法 = function(){}
//通过new关键词 调用构造函数创建实例化对象

使用class关键词定义构造函数
class 构造函数{
    //在构造函数中定义对象的属性属性值
    constructor(形参,形参...){
    this.属性 = 形参;
    this.属性 = 形参;
    }
    //在构造函数外定义函数方法 js程序自动定义在prototype 中
    函数方法(){}
    函数方法(){}
}
const 实例化对象 = new 构造函数(实参,实参...);
    通过new关键词调用构造函数创建实例化对象

       const obj = {}
        obj.a = 1
        obj.b = 2
        console.log(obj)
        const obj1 = {}
        obj1.a = 1
        obj1.b = 2
        console.log(obj1)
        //不能批量生产

        const obj = new Object()
        obj.a = 1
        obj.b = 2
        console.log(obj)
        const obj1 = new Object()
        obj1.a = 1
        obj1.b = 2
        console.log(obj1)
        //不能批量生产

        function createObj (name, age) {
            // 1. 手动创建一个对象
            const obj = {}
            // 2. 手动向对象内部添加属性
            obj.name = name
            obj.age = age
            // 3. 手动返回一个对象
            return obj
        }
//这个方法能够创建对象, 并且批量生产也可以

  function createObj () {
            // 1. 自动创建出来一个对象
            // 2. 手动向对象添加属性
            // 3. 自动返回一个对象
        }
        const o1 = new createObj()  // 这种调用方式, 才是 构造函数
        const o2 = createObj()     // 这就是一个普通函数的调用
        console.log(o1)
        console.log(o2)
/*
 自定义构造函数, 本质是就是一个函数
          当他和 new 关键字连用的时候, 就叫做构造函数
            自动创建一个对象
            手动向创建的对象添加属性
             自动返回一个对象
*/

function Person () {}
var o1 = new Person()   // 一个对象
var o2 = Person()   // 什么也得不到, 就是一个普通函数的调用

function person () {}
var o1 = new person()   // 一个对象

function person () {}
var o1 = new person   // 一个对象

function Person () {
    console.log(this)
}
var o1 = new Person()   // this ---> o1
var o2 = new Person()   // this ---> o2

function Person() {
    this.name = 'Jack'
    this.age = 18
}
var o1 = new Person()
var o2 = new Person()

function Person() {
    this.name = 'Jack'
    this.age = 18
    this.sayHi = function () {
        console.log('hello word')
    }
}
var o1 = new Person()
var o2 = new Person()

// 有缺点
function Person() {
    this.name = 'Jack'
    this.age = 18
    this.sayHi = function () {
        console.log('hello word')
    }
}
/**
 *  第一次 new 的时候, Person 这个函数要执行一遍
 *  执行一边就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi
*/
var o1 = new Person()
/**
 *  第二次 new 的时候, Person 这个函数要执行一遍
 *  执行一遍就会创造一个新的函数, 并且把函数地址赋值给 this.sayHi
*/
var o2 = new Person()

function Person () {}
console.log(Person.prototype)   // 是一个对象

function Person() {}
Person.prototype.name = 'prototype'
Person.prototype.sayHi = function () {}

function Person() {}
var p1 = new Person()
console.log(p1.__proto__ === Person.prototype)  // true

function Person() {}
Person.prototype.sayHi = function () {
    console.log('hello Person')
}
var p1 = new Person()
p1.sayHi()

function Person() {}
Person.prototype.sayHi = function () {
    console.log('hello')
}
var p1 = new Person()
var p2 = new Person()
console.log(p1.sayHi === p2.sayHi)

// 数组本身也是一个对象
var arr = []
var arr1 = new Array()

// 函数本身也是一个对象
var fn = function () {}
var fun = new Function()