构造函数

基本用法

function Person(name,age){
this.name=name
this.age=age
this.sayname=function(){
console.log(this.name)
}
}
let person1=new Person('matt',12)
let person2=new Person('danel',20)
person1.sayname() //matt
person2.sayname() //danel

构造函数创建实例执行流程

  • 在内存中创建一个新对象
  • 这个新对象内部的[[Prototype]]特性被赋值为构造函数的prototype属性。
  • 构造函数的this被赋值为这个新对象,即this指向新对象。
  • 执行构造函数内部代码,为新对象添加属性和方法
  • 返回新对象拓展
  1. 创建的对象内部有constructor属性指向构造函数,例如:
let person=new Person()
console.log(person.constructor==Person) //true
  1. 构造函数还可写成表达式
let Person=function(name,age){
this.name=name
this.age=age
sayname(){
console.log(this.name)
}
}
let person1=new Person('matt',12)
console.log(person1.sayname())  //matt

原型模式

基本用法

function Person(){}
Person.prototype.name='matt'
Person.prototype.age=29
Person.prototype.sayname=function(){
console.log(this.name)
}
let person=new Person()
person.sayname() //matt

原型的理解

  1. 构造函数实例化对象上有一个_prototype_属性,改属性指向构造函数的原型:prototype,例如:
function Person(){}
let person=new Person()
console.log(person._prototype_==Person.prototype) //true
  1. 构造函数上有一个prototype对象,该对象中有constructor属性和_prototyoe_属性,constructor指向构造函数本身,_prototype_指向上一级对象的原型prototype。例如:
function Person(){}
console.log(Person.prototype.constructor==Person) //true
console.log(Person.prototype._prototype_==Object.prototype) //true

原型的层级

  • 层级的理解
    通过构造函数创建一个实例,调用实例的属性或者方法,如果实例中存在相应的属性或者方法则完成调用,如果实例中没有相应的属性或者方法则去创建实例的构造函数的原型上调用方法或者属性,如果构造函数原型上没有该属性或者方法则继续向上一级原型对象中调用,直到最终调用成功或者调用失败返回null。
  • 拓展
  1. hasOwnProperty()方法能够判断访问的实例属性是自身属性还是原型属性,例如:
function Person(){}
let person=new Person()
person.name='matt'
console.log(person.hasOwnProperty('name')) //true,为true说明属性来自实例本身
  1. in操作符判断实例能否成功调用属性无论在实例上还是原型上。
function Person(){}
Person.prototype.name='matt'
let person=new Person()
person.age=12
console.log("name" in person1) //true
console.log("age" in person1)  //true
  1. Object.keys()方法接收一个对象作为参数返回所有可枚举的属性名称的字符串数组。
function Person(){}
Person.prototype.name='matt'
Person.prototype.age=12
Person.prototype.sayname=function(){console.log(this.name)}
let keys=Object.keys(Person.prototype)
console.log(keys) //"name,age,sayname"
  1. Object.getOwnPropertyNames()方法可以列出所有实例属性,无论是否可以枚举。
let keys=Object.getOwnPropertyNames(Person.prototype)
console.log(keys) //"[constructor,name,age,sayname]"
  1. Object.getOwnPropertySymbols()方法列出所有symbol符号的属性名。
let o={
[k1]:'k1',
[k2]:'k2'
}
console.log(Object.getOwnPropertySymbols(o))  //[Symbol(k1),Symbol(k2)]

对象迭代

  • Object.values()方法
    该方法返回对象值的数组,例如:
const o={
foo:'bar',
baz:1,
qux:{}
}
console.log(Object.values(o)) //['bar',1,{}]
  • Object.entries()方法
    这个方法返回键值对的数组,例如:
const o={
name:'matt',
age:12
}
console.log(Object.entries(o)) //[['name':'matt'],['age':12]]
最后修改:2022 年 02 月 12 日
如果觉得我的文章对你有用,请随意赞赏