Javascript 面向对象

Javascript 面向对象概念

对象 Object
类 Class
原型 prototype ,proto
构造函数 constructor,this,super
属性 attriubte
属性数据属性 key,value
属性访问器属性 get,set
属性特性 writable,enumable,configurable
计算属性 getter,setter
展开操作符 …

创建对象

// 创建对象
obj = Object.create(null)
console.log(obj.__proto__); // undefined

// 创建一个空对象,字面量
obj2 = {}
// 输出对象obj2的原型
console.log(obj2.__proto__); //[[Prototype]]: Object

class 定义类

class A {
    constructor() {
        this.a = 'a'
    }
}

obj_a = new A()
console.log(obj_a);

// 继承
class B extends A {
    /**
     * 构造函数
     * 
     * 初始化对象的属性和方法
     */
    constructor() {
        super() // 调用父类的构造函数
        this.b = 'b' // 定义当前对象的属性b
    }
}

obj_b = new B()
console.log(obj_b);

class C {
    /**
     * 构造函数
     * 
     * 初始化对象的属性和方法
     */
    constructor() {
        this.c = 'c' // 定义当前对象的属性c
    }

    /**
     * 静态方法
     * 
     * 不需要实例化就可以调用的方法
     */
    static static_method() {
        return 'static_method'
    }

    /**
     * 实例方法
     * 
     * 需要实例化后才能调用的方法
     */
    instance_method() {
        return 'instance_method'
    }
}


console.log(C.static_method());
c = new C()
console.log(c);
console.log(c.instance_method());

// 函数对象,又叫构造函数
function Person() {
    this.name = 'name'
    this.age = 18
}

p = new Person()
console.log(p.name);
console.log(p['name']);
console.log(p.__proto__);
/*
{}
constructor: ƒ Person()
[[Prototype]]: Object
*/

// 改变原型指向
Person.prototype = {
    name: 'name',
    age: 18
}
p = new Person()

console.log(p.__proto__);

// 共用原型
// 定义一个原型对象
let commonPrototype = {
    sayHello: function () {
        console.log("你好！");
    }
};

// 创建两个对象
let obj1 = {};
let obj2 = {};

// 将 obj1 和 obj2 的原型设置为 commonPrototype
obj1.__proto__ = commonPrototype;
obj2.__proto__ = commonPrototype;

// 现在两个对象都可以访问 commonPrototype 的方法
obj1.sayHello(); // 输出：你好！
obj2.sayHello(); // 输出：你好！

// 验证 obj1 和 obj2 是否共享同一个原型
console.log(obj1.__proto__ === obj2.__proto__); // 输出：true

// 不同构造函数
class D {
    constructor() {
        this.d = 'd'
    }
}

class E {
    constructor() {
        this.e = 'e'
    }
}
commonPrototype = {
    sayHello: function () {
        console.log("你好！");
    }
}

d = new D()
e = new E()
// 在 ES6 中,使用 Object.setPrototypeOf() 将 obj1 和 obj2 的原型设置为 commonPrototype
Object.setPrototypeOf(d, commonPrototype);
Object.setPrototypeOf(e, commonPrototype);
d.sayHello()
e.sayHello()
console.log(d.__proto__ === e.__proto__); // true

对象属性

obj = {
    a: 'a',
    b: 'b'
}

// ### 查看对象属性
// 输出对象的详细信息，包括其所有属性和方法
console.log(obj);

// 以字符串形式输出对象的可枚举属性和方法，便于查看和调试
console.log(JSON.stringify(obj));

// 输出对象的所有可枚举属性的名称（键），以数组形式
console.log(Object.keys(obj));

// 输出对象的所有可枚举和不可枚举属性的名称（键），但不包括原型链上的属性
console.log(Object.getOwnPropertyNames(obj));

// 输出对象的所有可枚举和不可枚举属性的名称（键），包括原型链上的属性
console.log(Reflect.ownKeys(obj));

// 输出对象的原型，即该对象继承的父类原型
console.log(Object.getPrototypeOf(Object));

// 输出Object构造函数的所有可枚举和不可枚举属性的名称（键）
console.log(Reflect.ownKeys(Object));

// 计算属性,混淆加密时多使用
const NAME = 'p1'
// const computePropertyName = function () { return 'p' + 2 }
const computePropertyName = () => 'p' + 2
obj = {}
obj[NAME] = 'a'
obj[computePropertyName()] = 'b'
console.log(obj); // {p1: 'a', p2: 'b'}

// 展开操作符
const obj_e = { a: 1, b: 2 }
const arr_e = [1, 2, 3]
extention = function (a, ...obj) {
    console.log(a, obj);
    console.log(arguments); // 接收参数对象
}
extention(1, obj_e) // 0:{ a: 1, b: 2 }
extention(2, arr_e) // 0:{ a: 1, b: 2 }