用prototype和直接扩展方法/属性的区别, 以及constructor构造器用法

直接扩展的方法/属性,可看做静态方法/属性,只能通过类名访问, 无法通过类实例访问

// 定义一个Person类型
const Person = function(){
    
}
// 直接扩展一个Person类的属性 personName
Person.personName = '张三'
Person.say = function(){
    console.log('我是:'+Person.personName)
}
// 这里能打印出 张三
console.log(Person.personName)
// 这里能打印: 我是:张三
Person.say()
// 创建一个Person类的实例
const per = new Person();
// 这里打印的是 undefined
console.log(per.personName)
// 这里打印的是 undefined
console.log(typeof per.say)

通过prototype扩展的方法/属性,可看做非静态方法/属性,只能通过类实例对象访问,无法通过类访问

const Person = function(){
    
}
Person.prototype.personName = '张三'

// 这里输出的是 undefined, 说明通过 prototype 扩展的属性, 无法通过类名直接访问
console.log(Person.personName)

// 这里输出的是张三
console.log(Person.prototype.personName)

const per1 = new Person()
// 这里输出的是张三
console.log(per1.personName)

per1.personName = '李思'


const per2 = new Person()
per2.personName = '王武'

// 这里输出的是李思
console.log(per1.personName)
// 这里输出的是王武
console.log(per2.personName)

constructor构造器用法

const Person = function(personName){
    this.personName = personName
}
// 这里是 function 类型
console.log(typeof Person.constructor)
// 扩展一个静态属性
Person.age = 12

// 创建一个Person实例
const p1 = new Person('张三')
// p1.constructor实际返回的就是这个对象的构造器, 也就是Person, 因此这里打印的是true
console.log(p1.constructor===Person)
// p1.constructor实际返回的就是这个对象的构造器, 也就是Person, 因此: p1.constructor.age 实际就相当于: Person.age, 因此这里打印的是12
console.log(p1.constructor.age)
// p1.constructor实际返回的就是这个对象的构造器, 也就是Person, 因此: p1.constructor.age 实际就相当于: Person.age, 因此这里打印的是true
console.log(p1.constructor.age===Person.age)

标签：p1,console,log,personName,用法,Person,constructor,prototype
来源： https://blog.csdn.net/sd4015700/article/details/119110446