JS面向对象之原型

简介: 如上code中,创建了p1、p2对象,比较p1中的showName函数和p2中的showName函数,结果为false;虽然两个对象中的函数的形式、实现的功能都是一样的,但由于p1、p2是对象的引用,分别指向的是不同的两块内存区域,所以比较的结果为false;假设有1000个对象,就要在内存中开辟1000个内存区域,并且每个对象中都有showName函数,这就极大的浪费了内存空间,怎么办呢?我们想最好把这个showName函数给提出去,作为一个公共函数,这时原型就横空出世了,就是为了解决上述问题。原型用来提取对象下面公用的方法或者属性,让公用的方法、属性在内存中只存在一份,以提高性能。

JS面向对象之原型



一、从对象引用的问题说起


20180630141904190.png


如上code中,创建了p1、p2对象,比较p1中的showName函数和p2中的showName函数,结果为false;


虽然两个对象中的函数的形式、实现的功能都是一样的,但由于p1、p2是对象的引用,分别指向的是不同的两块内存区域,所以比较的结果为false;


假设有1000个对象,就要在内存中开辟1000个内存区域,并且每个对象中都有showName函数,这就极大的浪费了内存空间,怎么办呢?我们想最好把这个showName函数给提出去,作为一个公共函数,这时原型就横空出世了,就是为了解决上述问题。


原型用来提取对象下面公用的方法或者属性,让公用的方法、属性在内存中只存在一份,以提高性能。


二、原型中的函数和普通函数有何区别?


   可将原型的概念和css中的class的概念对照起来理解:


原型中的函数 -- css中的class,可复用,优先级低


普通函数 -- css中的style,不可复用,优先级高


2018063014193512.png


三、通过原型改成工厂方式:


20180630141954782.png


此时再比较两个对象的showName函数,结果为true,说明该公共函数在内存中只占一份。


四、原型的书写原则


公共的属性和方法写在原型中;对象自己的属性和方法,写在构造函数中

一般是构造函数加属性、原型加方法。


总结:


原型就是公共属性和方法的容器,作用就是减少内存的浪费,提高性能。


目录
相关文章
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
181 0
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
109 0
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
219 1
JavaScript中的原型 保姆级文章一文搞懂
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
JavaScript 前端开发
JavaScript基础知识-原型(prototype)
关于JavaScript基础知识中原型(prototype)概念的介绍。
180 1
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
331 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
JavaScript 前端开发 Java
什么是JavaScript原型对象
【8月更文挑战第2天】什么是JavaScript原型对象
181 9
|
JavaScript 前端开发
JavaScript中什么是原型?有什么用?
JavaScript中什么是原型?有什么用?
116 1
|
JavaScript 前端开发
JavaScript prototype(原型对象)
JavaScript prototype(原型对象)
243 0
|
JavaScript
js奥义:原型与原型链(1)
js奥义:原型与原型链(1)

热门文章

最新文章