JS对象分类，构造函数

1.构造函数

function Square(width){  // 约定俗成构造函数名字大写字母开头
    this.width = width;
}
Square.prototype.getArea = function(){
    return this.width * this.width;
}
Square.prototype.getLength = function(){
    return this.width * 4;
}
let square = new Square(5); // 使用new操作符调用构造函数来创建对象

new Square() 自动做了以下四件事

自动创建空对象
自动为空对象关联原型,原型地址指定为Square.prototype,也就是此构造函数的原型
自动将空对象作为this关键字运行构造函数
自动return this

构造函数Square

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

补充

每个函数都有一个特殊的原型(prototype)用来保存将来函数如果用来创建对象时的共有属性，其中的Constructor是函数的构造器属性，其属性值就是函数本身

既然知道了new的原理，那么原生JS来实现一下new的功能

function student(name,sex,stuNumber){
                this.name = name;
                this.sex = sex;
                this.stuNumber = stuNumber;
           }

student.prototype.say = function(){          //  给构造函数添加原型，后面用来与新对象的原型链关联 
    console.log("我是"+this.name+"性别"+this.sex+"学号"+this.stuNumber);
}

function new1(){    //  定义实现new功能的函数
    let Constructor = [].shift.call(arguments);   //  利用对象冒充的方法取到构造函数
    let obj = Object.create(Constructor.prototype);  // 创建一个以此参数为原型的新对象
    Constructor.apply(obj,arguments);     //  把新建的对象作为构造函数中的this来调用构造函数
    return obj;           //  返回最终的对象
}

let xiaoou = new1(student,"小欧","男",180);    // 第一个参数是假的构造函数，用来实现构造的过程
xiaoou.say();  //  '我是小欧性别男学号180'

代码规范：

大小写
- 所有构造函数(专门用于创建对象的函数)）首字母大写
- 所有被构造出来的对象,首字母小写
词性
- new后面的函数,使用名词形式
- 如new Person()、new Object()
- 其他函数,一般使用动词开头
- 如createSquare(5)、createElement('div')
- 其他规则以后再说

2.如何确定一个对象的原型

方法

let obj= new Object()的原型是Object.prototype
let arr = new Array()的原型是Array.prototype
let square = new Square()的原型是Square.prototype

原因是new操作符所做的四件事

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

上面的第二步决定了原型所在

是谁构造出来的，那么原型就是谁的prototype属性对象的对象

对象. proto === 其构造函数.prototype

3.JS中的类

类

类是针对于对象的分类,有无数种
常见的有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

数组对象的自身属性

'0'/'1'/ '2'/ 'length'
注意,属性名没有数字,只有字符串

数组对象的共用属性

'push' / 'pop'/ 'shift'/ 'unshift'/ 'join' 等等

函数对象

function fn(x,y){return x+y}
let fn2 = function fn(x,y){return x+y}
let fn =(x,y)=> X+y
let fn = new Function('x','y', 'return x+y')

函数自身对象属性

'name'/ 'length'

函数对象共用属性

'call' / 'apply'/ 'bind' 等等

3.JS的终极问答

window是谁构造的

Window （注意W是大写的）
可以通过constructor属性看出

window.Object是谁构造的

window.Function
因为说有函数都是window.Function构造的

window.Function是谁构造的

window.Function
因为所有函数都是 window.Function构造的
其实浏览器构造了Function，然后设定它的构造者是自己本身

4.ES6 class 类语法

class Square{
    static x = 1;  //静态变量  属于Square类的属性
    width = 0;
    constructor(width){
        this.width = width;
    }
    getLength(){    // 声明原型方法
        return this.width * 4;
    }
    get area2(){   //声明只读属性  调用的时候可以不加()
        return this.width * this.width;
    }
}