js构造函数/原型

923 阅读2分钟

构造函数 X

可以构造出对象的函数

let x = new X();

new X() 自动做了四件事

  • 创建空对象x
  • 自动将空对象关联原型,原型地址指向 X.prototype
  • 自动将空对象作为 this 关键字运行构造函数
  • 自动 return this
function X(name){
    this.name = name        
}
X.prototype.style = function(){
    return '我是'+this.name
}
X.prototype.kind = function(){
    return '我是中国人'
}
let x = new X('chili')
console.log(x.name)         //自身属性
console.log(x.style())      //共有属性(方法)

总结

  • X 函数本身可以给对象添加自身属性(通过 this 运行)
  • X.prototype 对象负责保护对象的共有属性(存放在原型里)

关于 prototype / constructor

  • 所有函数都有 prototype 属性,所有 prototrpe 属性对应的对象(原型)都有一个 constructor 属性
  • constructor 属性保存了对应函数的地址(是 X 不是对象 x )
  • 如果一个对象不是函数,那么这个对象一般没有 prototype 属性,而会有 proto 属性

原型

每一个对象都有一个隐藏属性 proto ,属性值是一个地址指向一个对象,那个对象就是原型,里面包含了共有属性。

如何确定一个对象的原型?

你是谁构造的,你的原型就是谁的构造函数的 prototype 属性对应的对象。

原型公式

对象. proto === 其构造函数. prototype

一个不一样的对象

每一个对象都有原型,但除了根对象( Object.prototype),该对象的原型为null。

Object.prototype.__proto__ === null

以下问题

  1. js里早已存在一个 window 对象,window 对象是由谁构造的?
window.constructor === Window       //使用constructor查看构造者
  1. window 对象有一个 Object 属性,window.Object 是一个函数对象, window.Object 对象是由谁构造的?
window.Object.constructor === window.Function
Object.__proto === Function.prototype
window.Array.constructor === window.Function

所有的函数对象都是由 window.Function 构造的,即所有函数的原型为 Function.prototype

  1. window.Function对象是由谁构造的?
window.Function.constructor === window.Function         //并不是自己构造自己,而是由认为确定的构造函数 window.Function  

原型图

  • 数组为特殊对象,数组的原型除了包含普通对象的共有属性还包括数组的共有属性
  • Object.prototype === Array.prototype. _ proto_