字数

851 字

阅读时间

4 分钟

// 类型声明      变量名    赋值符号   实例化对象（调用构造函数）
   Person       person1   =       new Person();
//    ↑           ↑           ↑           ↑
//  类类型        变量        赋值       创建新对象，调用构造函数

• 左侧的 Person 是类名，表示变量 person1 的类型。
• 右侧的 Person() 是构造函数的调用，用于创建 Person 类的新实例。
• 两者都涉及到 Person 类，但右侧的 Person() 不是普通的函数，而是构造函数。
• 构造函数没有返回值，连void都没有

let name = "windowsss";
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 通过 prototype 为所有实例添加一个方法
Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};
Person.goodbey = function () {
  console.log(`goodbey, my name is ${this.name}`);
};

let person1 = new Person("Alice", 30);
let person2 = new Person("Bob", 25);

person1.sayHello(); // "Hello, my name is Alice"
person2.sayHello(); // "Hello, my name is Bob"
Person.goodbey();这样不会输出windowsss

转换成java

class Person {
    String name;
    int age;

    // 构造方法
    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // 实例方法 sayHello
    public void sayHello() {
        System.out.println("Hello, my name is " + this.name);
    }

    // 静态方法 goodbye
    public static void goodbye(String name) {
        System.out.println("Goodbye, my name is " + name);
    }

    public static void main(String[] args) {
        // 创建实例
        Person person1 = new Person("Alice", 30);
        Person person2 = new Person("Bob", 25);

        // 调用实例方法
        person1.sayHello(); // "Hello, my name is Alice"
        person2.sayHello(); // "Hello, my name is Bob"

        // 调用静态方法
        Person.goodbye("windowsss"); // "Goodbye, my name is windowsss"
    }
}

Object.defineProperty() 并不是专门用来定义静态属性的，它是一个通用的 JavaScript 方法，用于在对象上定义或修改属性的特性。虽然它可以用于给类的构造函数（即静态属性所在的对象）添加静态属性，但它并不是专门为此设计的。

Object.defineProperty() 与静态属性

在 JavaScript 中，静态属性通常是定义在构造函数（或类本身）上的属性，而不是实例上的属性。静态属性直接绑定到类本身，而不是类的实例。

Vue 2 中的响应式原理

1. 数据劫持（getter 和 setter）

Vue 2 会通过 Object.defineProperty() 为每个数据对象的属性定义 getter 和 setter。这样，在访问或修改这些属性时，Vue 可以知道什么时候发生了变化，并做出响应。

为什么 Vue 3 放弃了 Object.defineProperty()？

在 Vue 3 中，Vue 选择使用 Proxy 来替代 Object.defineProperty() 实现响应式系统。Proxy 提供了更加灵活和高效的拦截方式，能够支持更复杂的对象操作，如数组的修改等，并且避免了 Vue 2 中由于深度递归遍历对象所带来的性能问题。 es6 proxy reflect 的数据劫持

function Person(name, age) {

  this.name = name;

  this.age = age;

}

Object.defineProperty(Person, "name", {

  value: "windowsss", // 使用 value 来设置属性值

  writable: true, // 可修改该属性的值

  enumerable: true, // 该属性可以在枚举对象的属性时出现

  configurable: true // 该属性可以被删除或修改描述符

});

  

// 通过 prototype 为所有实例添加一个方法

Person.prototype.sayHello = function () {

  console.log(`Hello, my name is ${this.name}`);

};

Person.goodbey = function () {

  console.log(`goodbey, my name is ${this.name}`);

};

  

let person1 = new Person("Alice", 30);

let person2 = new Person("Bob", 25);

  

person1.sayHello(); // "Hello, my name is Alice"

person2.sayHello(); // "Hello, my name is Bob"

Person.goodbey();这样可以输出windowsss

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名