前端学习日记-构造函数与对象分类

构造函数

new X()自动做了四件事

• 自动创建空对象
• 自动为空对象关联原型，原型地址为X.prototype
• 自动将空对象作为this关键字运行构造函数
• 自动return this

构造函数X

• X函数本身负责给对象本身添加属性
• X.prototype对象负责保存对象的共用属性

代码规范

大小写

• 所有构造函数（专门用于创建对象的函数）首字母大写
• 所有被构造出来的对象，首字母小写

词性

• new后面的函数，使用名词形式
• 如 new Person() , new Object()
• 其他函数，一般使用动词开头
• 如creatSquare(5),creatElment(‘div’)

你是谁构造的，你的原型就是谁的prototype属性对应的对象
对象.__proto__ === 其构造函数.prototype

let x= { }
x.__proto__ === Object.prototype

---

对象需要分类

理由一

• 有很多对象拥有一样的属性和行为
• 需要把他们分为同一类
• 如square1和square2
• 这样创建类似对象的时候就很方便

理由二

• 但是还有很多对象拥有其他的属性和行为
• 所以就需要不同的分类
• 比如Square/Circle/Rect就是不同的分类
• Array/Function也是不同的分类
• 而Object创建出来的对象，是最没有特点的对象

---

类型VS类

类型

• 类型是JS数据的分类，有7种
• Number,String,Bool,Symbol,Null,Undefined,Object

类

• 类是针对于对象的分类，有无数种
• 常见的有Array，Function，Date，RegExp等

数组对象

定义一个数组

• let arr = [1,2,3]
• let arr = new Array [1,2,3] //元素为1，2，3
• let arr = new Array(3) //长度为3

数组对象的自身属性

• 属性名只有字符串，没有数字

---

• window是Window构造的 ，可以通过constructor属性看出构造者
• window.Object是window.Function构造的
• window.Function是window.Function构造的
• 浏览器构造了Function，然后指定它的构造者是自己

---

关于prototype属性

• 所有函数一出生就有一个prototype属性（除了箭头函数）
• 所有prototype一出生就有一个consrtuctor属性
• 所有constructor属性一出生就保存了对应的函数的地址
• 如果一个函数不是构造函数，它依然拥有prototype属性，只不过这个属性没什么用
• 如果一个对象不是函数，那么这个对象一般来说没有prototype属性，但这个对象一般一定会有__proto__属性

---

        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayHi = function () {
            console.log('你好，我叫' + this.name);
        }

        let person = new Person('frank', 18)
        person.name === 'frank' // true
        person.age === 18 // true
        person.sayHi() // 打印出「你好，我叫 frank」

        let person2 = new Person('jack', 19)
        person2.name === 'jack' // true
        person2.age === 19 // true
        person2.sayHi() // 打印出「你好，我叫 jack」

class方法

        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            sayHi() {
                console.log('你好,我叫' + this.name);
            }
        }

        let person = new Person('frank', 18)
        person.name === 'frank' // true
        person.age === 18 // true
        person.sayHi() // 打印出「你好，我叫 frank」

        let person2 = new Person('jack', 19)
        person2.name === 'jack' // true
        person2.age === 19 // true
        person2.sayHi() // 打印出「你好，我叫 jack」```