js 进阶知识点总结 一张图理解prototype、proto和constructor的三角关系

原型：prototype、proto和constructor

对象：defineProperty()和defineProperties()

prototype 属性使您有能力向对象添加属性和方法。

function employee(name,job,born)
{
    this.name=name;
    this.job=job;
    this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

employee.prototype.salary=null;
bill.salary=20000;

document.write(bill.salary);

proto是构造函数初始化后产生的对象的一个属性，指向构造函数的prototype

function Car(){}
var car = new Car();
// car.__proto__  =====> Car.prototype

function Car(){}

var p = {
    name: 'Mazda'
}
Car.prototype.name = 'Benz';
var car = new Car();
console.log(car.name); // Benz
car.__proto__ = p;   // 更改了__proto__
console.log(car.name);  // Mazda

constructor 是一种用于创建和初始化class创建的对象的特殊方法

// 使用属性
var test=new Array();

if (test.constructor==Array)
{
    document.write("This is an Array");
}

// 调用
class Polygon {
  constructor() {
    this.name = "Polygon";
  }
}

const poly1 = new Polygon();

console.log(poly1.name);
// expected output: "Polygon"

相关文章： 一张图理解prototype、proto和constructor的三角关系

Object.defineProperty()

方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。如果不指定configurable, writable, enumerable ，则这些属性默认值为false，如果不指定value, get, set，则这些属性默认值为undefined。

语法: Object.defineProperty(obj, prop, descriptor)

obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符

var obj = new Object();

Object.defineProperty(obj, 'name', {
    configurable: false,
    writable: true,
    enumerable: true,
    value: '张三'
})

console.log(obj.name)  //张三

 Object.defineProperties()

方法直接在一个对象上定义一个或多个新的属性或修改现有属性，并返回该对象。

语法: Object.defineProperties(obj, props)

obj: 将要被添加属性或修改属性的对象
props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: '张三',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})

console.log(obj.name, obj.age) // 张三, 18

 相关文章：JavaScript中的Object.defineProperty()和defineProperties()