JavaScript中的原型Prototype【1】

2024-05-11 04:18
文章标签 java script prototype 原型

本文主要是介绍JavaScript中的原型Prototype【1】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转载自： 原型Prototype

在看了不少资料之后，对于原型的理解就是两个字，共享。 在这一部分，将通过分析原型出现的原因，已经原型的应用-->继承。

原型Prototype的出现

在讨论原型的出现，就需要从对象的创建开始说起。

创建对象可以通过new Object()或者直接通过对象字面量{}完成，但是使用这种方法会导致在创建多个对象的时候，产生大量的代码。因此有了工厂模式：
1 工厂模式
工厂模式就是使用一个函数将需要创建的对象的属性都封装起来，如：

    function createPerson(name, age, job){var obj = new Object();obj.name = name;obj.age = age;obj.job = job;obj.alertName = function(){console.log(this.name);}return obj;}var personFirst = createPerson("June", 21, "Student");var PersonSecond = createPerson("Louis", 23, "Student");

这样就可以通过工厂模式创建对象，只需要将参数传入到createPerson函数中，函数会返回一个obj初始化后的对象。需要注意的是，使用工厂模式创建的对象，不能解决对象识别问题，即：

    personFirst instanceof object   //打印truepersonFirst instanceof createPerson     //打印false

2 构造函数模式

    function Person(name, age, job){this.name = name;this.age = age;this.job = job;this.alertName = function(){console.log(this.name);}}var personFirst = new Person("June", 21, "Student");var personSecond = new Person("Louis", 23, "Student");

1.首先构造函数和普通的函数是没有什么不同
2.要把一个函数当成构造函数使用，只需要使用new操作符
3.根据习惯，构造函数的第一个字母使用大写

  • new操作符创建对象的过程 创建一个新的对象 --> 将构造函数的作用域赋给新对象(即this指向了新对象) --> 对象的初始化 --> 返回新对象

  • 构造函数模式的不足

使用构造函数存在的最大问题就是每个实例都会将所有的属性创建一次。这个对于数值属性来说可以接受，但是如果函数方法每个实例都要创建一遍，则不合理。所以对于构造函数模式可以将方法转移到构造函数外部，如下：

    function Person(name, age, job){this.name = name;this.age = age;this.job = job;this.sayName = sayName;}function sayName(){console.log(this.name);}var personFirst = new Person("June", 21, "Student");var personSecond = new Person("Louis", 23, "Student");

但是对于这种方法，如果需要多个函数，则会导致很多个全局函数。对于构造函数模式的这个问题，我们可以通过原型来解决。

3 原型模式

  • 原型

在每个创建的函数中都会有一个原型prototype属性，这个属性是一个指针，指向一个对象。原型指向的这个对象包含可以由该函数创建的对象共享访问的属性和方法。简单的说就是该原型指向的对象中含有可以被共享访问的属性和方法，而只有该函数创建的实例才有权限访问。

    //构造函数function Person(){}//构造函数prototype指向的原型对象Person.prototype.name = "Louis";Person.prototype.age = 23;Person.prototype.job = "Student";Person.prototype.sayName = function(){console.log(this.name);}//使用构造函数创建的实例var personFirst = new Person();personFirst.sayName();var personSecond = new Person();personSecond.sayName();console.log(personFirst.sayName == personSecond.sayName);   //打印true

我们在Person函数的原型中添加的所有属性和方法都能够被personFrist和personSecond访问，而且需要注意的是共享访问，而不是各自保存一个副本。

  • 原型对象的理解
    1. 在创建了一个函数之后，JavaScript引擎就会为该函数创建一个prototype属性，这个属性指向原型对象。而原型对象中含有一个constructor的属性，这个属性指向含有原型对象所在的函数。就如之前的构造函数Person、Person.prototype、personFirst之间的关系如下图： 三者之间的关系示意图

由上图可以看到，其实实例和构造函数之间并没有直接的联系。每个实例中都含有[[prototype]]属性，这个属性指向Person.prototype这个原型对象，而Person.prototype原型对象中含有constructor属性则指向构造函数Person，构造函数也含有指向Person.prototype原型的属性prototype。
在personFirst中我们可以看到，该对象除了[[prototype]]属性之外，并没有其他的属性。但是我们能够通过personFirst.name得到“Louis"的值。这就是原型和对象实例查找属性的问题：

一个对象在读取某个属性值的时候，首先是先查找该对象是否包含这个属性，如果有则返回，不再向原型查找；如果没有则向上查找该对象指向的原型是否含有这个属性，如果有则返回原型中该属性的值，如果没有则继续向继承的原型链上查找，如果还是没有则直接返回undefined。
对于上面的例子，在使用personFirst.name访问取name属性值的时候，首先先找personFirst这个对象上是否含有属性值name，很明显并没有，接着则personFirst的原型链Person.prototype上查找name属性，发现有，而且值为"Louis"，则将该值直接返回。

  1. 原型属性的屏蔽：当我们在对象实例上创建一个和原型上相同名称的属性时，根据属性的查找顺序，我们可以知道原型上相同名称的属性将会被屏蔽掉。Show the fllowing code!

      //构造函数function Person(){}//原型对象Person.prototype.name = "Louis";Perosn.prototype.age = 23;Person.prototype.job = "Student";Person.prototype.sayName = function(){console.log(this.name);}//实例var personFirst = new Person();personFirst.name = "John";personFirst.sayName()   //打印: John  --> 来自实例var personSecond = new Person();personSecond.sayName()  //打印：Louis    --> 来自原型

当我们为对象添加一个属性的时候，这个属性就会屏蔽原型对象中的同名属性；也就是说如果添加的这个属性只会阻止我们访问原型中的那个对象，但是不会修改原型中的属性。不过，我们可以使用delete操作符来删除对象实例属性，从而恢复访问原型中的对象。

    function Person(){}Person.prototype.name = "Louis";Person.prototype.age = 23;Person.prototype.job = "Student";Person.prototype.sayName = function(){console.log(this.name);}var person1 = new Person();var person2 = new Person();person1.name = "June";console.log(person1.name);      //打印： June --> 来自对象console.log(person2.name);      //打印： Louis--> 来自原型delete person1.name;console.log(person1.name);      //打印： Louis--> 来自原型
  • in操作符
    1. hasOwnProperty && in 操作符 使用hasOwnProperty()方法可以检测是一个属性是存在于实例中，还是原型中。只有当给定的属性存在于对象实例中，才会返回true。而对于in操作符，则无论属性是否存在于实例还是原型中，只要能够访问到这个属性，则返回true。
    //使用hasOwnProperty()方法function Person(){};Person.prototype.name = "Louis";Person.prototype.age = 23;Person.prototype.job = "Student";Person.prototype.sayName = function(){console.log(this.name);}var personFirst = new Person();var personSecond = new Person();console.log(personFirst.hasOwnProperty("name"));    //false --> 来自原型console.log(personSecond.hasOwnProperty("age"));    //false --> 来自原型personFirst.name = "June";console.log(personFirst.hasOwnProperty("name"));    //true --> 来自对象实例
    //使用in操作符function Person(){};Person.prototype.name = "Louis";Person.prototype.age = 23;Person.prototype.job = "Student";Person.prototype.sayName = function(){console.log(this.name);}var personFirst = new Person();var personSecond = new Person();console.log("name" in personFirst); //true --> 来自原型console.log("age" in personSecond); //true --> 来自原型personFirst.name = "June";console.log("name" in personFirst); //true --> 来自实例对象

下面的代码用来检测属性是否存在于原型中

    function hasPrototypeProperty(obj, name){return !obj.hasOwnProperty(name) && (name in obj);}
  • 原型的字面量写法
    1. 上面使用Person.prototype.xxx的方法书写原型，每次需要添加属性的时候都要重复书写前面部分的代码。对于这种情况，我们可以使用原型的字面量来创建原型对象。
    function Person(){}Person.prototype = {name: "Louis",age : 23,job : "Student",sayName : function(){console.log(this.name);}}

使用原型字面量有一点需要注意的是，原型对象的constructor属性不再指向原来的构造函数Person();
这是因为使用Person.prototype = {}创建原型，相当于Person.prototype是Object的实例，而实例中存在的[[prototype]]指向的是Object的原型，原型中的constructor属性指向的就是Object对象，所以如果constructor属性很重要，则需要在创建原型的字面量上重新指定，如：

    function Person(){}Person.prototype = {constructor : Person,name: "Louis",age : 23,job : "Student",sayName : function(){console.log(this.name);}}
  • 原型的动态性
    1. 原型的动态性体现在只要对原型对象所做的任何修改都能够立即从实例上得到反映。
    var friend = new Person();Person.prototype.sayHi = function(){console.log("halo Louis");}friend.sayHi();     //打印： halo Louis

需要注意的是，给原型添加属性和方法都能够在实例上得到反映，但是如果重新改写原型，则会切断实例和原型之间最初的关系。
需要谨记的是：实例中的指针仅仅指向原型，而不是指向构造函数
重写原型之后构造函数、对象实例、原型之间的关系如下图：

重写原型之后构造函数、对象实例、原型之间的关系

  • 原型的弊端
    1.原型的弊端也是显而易见的，对于数值型属性而言，每一个属性也都是共享的。对于所创建的每一个实例都具有相同的属性值，其实也不合理。应该是数值型属性为各自所有，而方法属性则可以进行共享，所以一般在创建构造函数的时候都是使用构造函数模式和原型模式相结合进行，如：
    //属性私有function Person(name, age, job){this.name = name;this.age = age;this.job = job;}//方法共有Person.prototype.sayName = function(){console.log(this.name);}var personFirst = new Person("June", 21, "Student");var personSecond = new Person("Louis", 23, "Student");personFirst.sayName();  //打印： JunepersonSecond.sayName(); //打印： Louis

由于篇幅过长，关于原型的应用继承放在原型Prototype[2]

参考文章

[1]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
[2]http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/
[3]http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html
[4]http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html
[5]JavaScript高级程序设计(3nd Edition)第六章


这篇关于JavaScript中的原型Prototype【1】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/978480。

相关文章

Springboot @Autowired和@Resource的区别解析

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@
阅读更多...
springboot循环依赖问题案例代码及解决办法

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖（即BeanA依赖BeanB,而BeanB又依赖BeanA）,会导致Spring的... 目录1. 什么是循环依赖？2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1：使用 @La
阅读更多...
Java枚举类实现Key-Value映射的多种实现方式

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co
阅读更多...
Elasticsearch 在 Java 中的使用教程

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J
阅读更多...
Java中的String.valueOf()和toString()方法区别小结

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法
阅读更多...
Java中List的contains()方法的使用小结

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论：List 的 contain
阅读更多...
Java实现文件图片的预览和下载功能

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件（图片）的预览和下载 @ApiOperation("访问文件") @GetMapping("
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
SpringCloud动态配置注解@RefreshScope与@Component的深度解析

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.
阅读更多...
Java并发编程必备之Synchronized关键字深入解析

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2