js原型理解和其作用之一:共享数据,节省内存空间

1,823 阅读2分钟

原型

js虽然是一门基于对象的语言,但它也是可以把任何事物当成对象。在对象中,也分有函数对象和实例对象,函数对象也就是所说的构造函数。

构造函数中有prototype这个属性,它是构造函数的原型,也是一个原型对象,这个属性是给程序员使用,是标准的属性------>prototype--->可以叫原型对象

实例对象中有__proto__这个属性,它是实例对象的原型,也是一个原型对象,这个属性是给浏览器使用,不是标准的属性,因为有些浏览器是不支持程序员使用这个__proto__属性的。

知识点

1. 实例对象中的__proto__这个原型,与其构造函数的prototype原型,是相等的
即:实例对象.__proto__ == 其构造函数.prototype ====》 true
因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype,实例对象的__proto__指向了构造函数的原型对象prototype。
  1. 利用原型进行数据共享,每一个由构造函数创建出来的实例对象都是不相等的,如
function Person(name){
	this.name = name;
	this.eat = function(){
		console.log("food");
	}
}
var per1 = new Person("1");
var per2 = new Person("2");
console.log(per1.eat == per2.eat);
//输出结果:fales

这里的per1.eat 和per2.eat都是指向各自内存空间中的eat方法,这将会浪费大量的内存空间,若要解决此问题,则可使用原型好解决

function Person(name){
	this.name = name;
}
Person.prototype.eat = function(){
    console.log("food");
}

var per1 = new Person("1");
var per2 = new Person("2");
console.log(per1.eat == per2.eat);
//输出结果:true

此时per1.eat 和per2.eat都是指向原型中的eat方法,节省了内存空间。

  1. 构造函数、实例对象和原型对象三者之间的关系
    3.1 实例对象是由构造函数创建出来的
    3.2 构造函数中有一个属性叫prototype,是构造函数的原型对象
    3.3 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己的构造函数,即反指回来
    3.4 实例对象的原型对象(__proto__)指向的是其构造函数的原型对象
    3.5 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
    三者关系图如下:
  2. 原型中的this,指向的是实例对象
  3. 原型的简单语法
构造函数.prototype = {
    constructor:构造函数, //注意:这个属性必不可少,否则原型中会丢失构造器
    属性:值,
    方法名:函数
}
  1. 理解了原型之后,通过原型,我们也可以对系统的内置对象添加方法
  2. 实例对象调用原型中的属性或方法时,原本是实例对象.__proto__.属性\方法,但是__proto__并不是个标准的格式,所以实例对象调用原型中的属性\方法时,可以省略__proto__,直接是“实例对象.属性\方法”。