类

JS中的内置类

数据类型

每一种数据类型都有一个自己对应的类别

• Number数字类，每一个数字（NaN\Infinity）都是它的一个实例
• String、Boolean、(Null、Undefined)、(Symbol)、BigInt、Object（Array、RegExp、Date...）、Function

每一个DOM元素对象也有自己的类和祖先类

• DIV元素对象 -> HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget -> Object
• A元素对象 -> HTMLAnchorElement -> HTMLElement ...
• document -> HTMLDocument -> Document -> Node ...
• window -> Window -> WindowProperties -> EventTarget ...
• 元素集合 -> HTMLCollection -> Object
• 节点集合 -> NodeList -> Object

数组的学习

1.准备Array类的一个实例（一个具体的数组）

2.开始研究数组的结构、研究它的方法（一般都在Array.prototype原型上呢） // let arr = [10, 20, 30];

类

真实开发的时候，光这些内置类是不够的，我们还需要自己构建一些类“自定义类”来完成功能的开发

创建函数并且把函数执行（每一个类都是函数数据类型的，包含内置类和自定义类）

function func() {}
func();

自定义类（类名的第一个首字母一般都要大写）

function Func() {
 
}

let f = Func();

把它当做普通函数执行（形成私有的上下文、作用域链、THIS[window]、ARGUMENTS、形参赋值、变量提升、代码执行...），f获取的是函数的返回结果（函数没有RETURN，所以f=undefined）

let f = new Func();

这是构造函数执行（当做类来执行，而不是当做普通函数了），此时Func被称为“类”，返回的结果(f)被称为“当前类的一个实例”，它是一个实例对象

构造函数执行（类） 和 普通函数执行 的区别？

相同

1. 和普通函数执行大体上都是一样的（具备普通函数执行的一面）

不同

1. 首先默认创建一个对象（这个对象就是当前类的实例）
2. 让上下文中THIS指向这个对象
3. 在函数没有返回值得情况下，默认会把创建的实例对象返回（如果函数中自己写了return，返回基本类型值，还是以返回实例为主，返回的是引用值，自己编写的返回值会替换默认返回的实例）

function Func(x, y) {
    let num = x + y;
    this.x = x;
    this.y = y;
}
let f1 = Func(10, 20);
// console.log(f1, window.x); //=>undefined 10
 
let f2 = new Func(10, 20);
console.log(f2); //=>{x:10,y:20} 当前类的实例对象 

 
function Func(x, y) {
    // num只是当做普通函数执行的时候，给私有上下文中设置的私有变量，和实例对象没有关系，只有THIS是实例对象，所以THIS.XXX=XXX才和实例有关系
    let num = x + y;
    this.x = x;
    this.y = y;
 
    // return {
    //  name: 'xxx'
    // }; //=>返回基本类型值,f2依然是创建的实例对象；如果自己返回的就是一个引用值，一切以自己返回的为主，此时的f2={name:'xxx'}而不再是当前类的实例了
}
let f2 = new Func(10, 20);
console.log(f2);
// console.log(f2 instanceof Func);

instanceof / in 区别

基于 instanceof 可以检测当前对象 是否为某个类的实例 。

语法：实例 instanceof 类，是的话返回TRUE，反之FALSE

每一个对象（包含实例对象）都有很多属性和方法，在自己堆内存中存储的都是私有的属性方法，基于__proto__原型链查找类prototype原型上的都是共有的属性方法

检测属性是当前对象私有的还是公有的：

• 1. 对象 .hasOwnPrototype (属性) 检测是否为私有的属性（只有是私有属性才是TRUE，哪怕有这个属性，但是为公有属性结果也是FALSE）
• 2. 属性 in 对象：检测是否为他的属性（不论是公有还是私有都可以）

console.log('x' in f2); //=>TRUE
console.log(f2.hasOwnProperty('x')); //=>TRUE
 
console.log('toString' in f2); //=>TRUE
console.log(f2.hasOwnProperty('toString')); //=>FALSE  toString是他的公有属性