Web 前端开发 让前端飞js

构造函数和原型及两者作用

2019-10-16  本文已影响0人  Nice先生的狂想曲

前言

在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征。


而在此之前,我们创建对象的方法有如下几点。

创建对象方法
  1. 利用new Object()创建对象
var obj1=new Object(); 
  1. 利用对象字面量创建对象
var obj1={};
  1. 利用构造函数创建对象
function Person(uname,age){
   this.uname=uname;
   this.age=age;
   this.sing=function(){
     console.log("唱歌")
 }
}

构造函数

实例成员

构造函数内部通过this添加的成员,实例成员只能通过实例化对象访问

静态成员

构造函数本身上添加的成员,静态成员只能通过构造函数访问,例:

Person.sex ="男";
构造函数问题

创建多个对象,实例方法成员会创建多个内存空间存放

构造函数原型 prototype

原因:由于创建多个对象时实例方法成员创建多个内存空间,造成资源浪费
概念:构造函数的原型prototype指向另一个对象(又称原型对象),而这个原型对象的所有属性方法都会被构造函数所拥有。因此通过原型分配的函数是所有对象所共享的。
作用:原型主要作用为共享方法

方法查找规则:
先看对象中是否存在该方法,如果有就执行对象中的方法,如果没有则因为有对象的 __ proto __ 的隐式存在,则去查找构造函数中原型对象的方法。即实例对象的__ proto __指向构造函数的原型对象

对象原型与构造函数原型对象的constructor属性均指向函数本身。

person.proto.constructor=Person.prototype.constructor=Person

图解 构造函数、原型对象与对象原型的关系

但如果方法太多,你可能会这样

Person.prototype ={
  sing:function(){}
  dance:function(){}
}

此时,Person.prototype.constructor不存在,可以添加

Person.prototype ={
  constructor:Person,
  sing:function(){}
  dance:function(){}
}
上一篇下一篇

猜你喜欢

热点阅读