[写做中...]Js面向对象(2): 建立对象

目标

• 理解对象
• 建立对象实例
• 理解Js中的继承

前言

在理解对象中了解到了两种最简单的建立对象的方式，本篇详细讨论Js中各类建立对象的方法。

建立对象

重点须要搞清楚构造函数模式、原型模式和组合使用两种模式的建立对象实例方法。(明白前两个其实大概就明白了如何组合使用)

一、工厂模式

工厂模式是一种普遍使用的设计模式， 建立对象的工厂模式，简单地理解就是将new Object()建立对象的具体过程封装为一个函数

function CreatSomething(){
    const o = new object();
    o.propertyName1='value1';
    o.propertyName2='value2';
    ...
    o.functionName=function (){
        console.log(this.propertyName1);
    }
}
复制代码

工厂模式存在的问题是，没有解决对象识别的问题（没法判断一个对象是由哪一个函数实例化的），所以用的也很少，做为一个了解。

二、构造函数模式

2.一、普通构造函数模式

经过Js的一些内置对象能够建立对象实例，如Object、Array等，也能够自定义构造函数，如：

funtion Something(val,num){
    this.propertyName1=val;
    this.propertyName2=num;
    ...
    this.functionName=function (){
        console.log(this.propertyName1);
    }
}
const something1=new Something('val1',21);
const something2=new Something('val2',20);
复制代码

与工厂模式的区别在于：

• 能够不用显式地建立对象(缘由是被new承包了) ...=new Object()
• 将属性和方法赋给了this对象
• 能够不return新对象

因此相比工厂模式，使用构造函数建立对象实例更简洁，高效。

那么，构造函数是如何将属性和方法赋给实例对象的呢？
关键在于:

• new 操做符
• 以及this指针、做用域等相关知识点，参考this、apply、call、bind。

2.二、new操做符

对于new操做符，我以为理解下其执行步骤，应该就清楚了

• (1) 建立一个新对象
• (2) 将构造函数的做用域赋给新对象（将this绑定到这个新建立的对象）
• (3) 执行构造函数中的代码（将属性和方法添加到这个新对象）
• (4) 返回该对象

补充：模拟一个new操做符的实现（建议了解清楚原型以后再回过头来看）

function myNew(func){
    const objNull={};  //新对象
    if (func.prototype !== null){
        obj.__proto__=func.prototype; 
    }
    const obj=func.apply(res,Array.prototype.slice.call(arguments,1));  //绑定this
    if ((typeof obj === "object" || typeof obj === "function") && obj !==null){
        return obj;
    }
    return objNull;
    
}

复制代码

在StackOverflow查阅new的时候看到一个评论戳中笑点...

2.三、思考：构造函数建立对象实例存在的问题？

简单来讲，构造函数的问题在其对象的方法上。

三、原型模式

3.一、理解原型对象

咱们建立的每个函数都有一个prototype指针，指向一个对象（即原型对象），包含由当前函数派生出的全部实例共享的属性和方法。

当调用构造函数建立实例后，实例内部将会包含一个[[prototype]]指针（浏览器中的实现是__proto__），指向其构造函数的原型对象prototype

因此简单总结下，

• 实例.__proto__=构造函数.prototype
• 另外ES5中封装了一个方法，MDN建议使用这种方式来操做
  • Object.getPrototypeOf(实例)==构造函数.prototype

function Person(){...}
const someone=new Person();

someone.__proto__===Person.prototype                            //true
Object.getPrototypeOf(someone)===Person.prototype               //true
复制代码

3.二、普通原型模式

function Person(){
    
}
Person.prototype.property1=val1;
Person.prototype.property2=val2;
Person.prototype.funcName=function (){
    console.log(this.property1)
};

const someone = new Person();
someone.fucName()  // 输出val1

复制代码

3.三、内置对象的原型

Object Array Date RegExp FUnction 

基本包装类型
Boolean Number String

单体内置对象
Global Math
复制代码

3.四、思考：原型模式建立对象实例存在的问题？

对象中值为引用类型的属性会被各实例共享，也就是说在原型模式下，改变一个实例对象的 引用类型属性值会影响到其余全部实例对象。

四、组合使用构造韩式和原型模式

更多建立对象实例的方式

动态原型模式

寄生构造函数模式

稳妥构造函数模式

小结

此处应该有个小结，不过还没想好该写些什么。

水平有限，不许确的地方，欢迎指正。

参考：

• 《JavaScript高级程序设计》
• 《你不知道的JavaScript》
• MDN文档
• this、apply、call、bind
• 《JavaScript入门》 阮一峰
• 本身画的前端知识体系思惟导图 | PressOn
• What is the 'new' keyword in JavaScript | stackOverflow