前言:JavaScript的原型对象一直是新人学习js的一大重大阻碍,但是原型的知识往往又是面试中常常会被深挖的一个点,为什么会这样呢?本文带你揭秘JavaScript原型的重要性,了解重要性之后再进行学习效果会更佳。

1、从工厂模式说起

  众所周知,工厂模式在软件工程领域的运用极其广泛,以下举例工厂模式创建一个对象。

 1 function createCar(name,num){
2 //创建一个空对象
3 let obj = {};
4 //为空对象添加属性
5 obj.name = name;
6 obj.num = num;
7 return obj
8 }
9 const myCar = createCar('benz',123456)
10 console.log (myCar); //{name: 'benz', num: 123456}

  上述案例中,createCar()方法接收两个参数,一个name,一个num,通过参数传入,然后返回新对象,最后调用函数即可快速创建多个属性不同的对象。

  这样的好处是能够快速创建大量属性不同的对象,但是新创建的对象没有明确的标识,即无法得知新创建的对象是什么类型,使用instanceOf无法准确查明。通过构造函数可以解决标识问题并也能批量创建对象。为此,我们引出构造函数的概念。

2、构造函数模式

  ES中的构造函数是用于创建特定类型对象的,如Object和Array这样的原生构造函数,运行时就可以直接使用。但是我们也可以使用构造函数来定义属性和方法。

  以下为使用构造函数模式创建的对象的例子:

1 const Person = function(name,age){
2 this.name=name;
3 this.age=age;
4 }
5 const p1 = new Person('Billy',21);
6 console.log(p1);//{name:Billy,age:21}

  上述例子同样也可以通过多次new来创建大量属性不同的对象 ,所创建的对象与工厂模式创建的对象类似,但是仍有以下区别:

  • 没有显示创建对象
  • 属性和方法直接赋值给了this
  • 没有return
  • 解决了标识问题

  这样看似创建的对象天衣无缝,又能批量创建、又有标识,但是如果使用构造函数创建对象需要在对象上捆绑方法时,就会存在极大缺陷。代码如下:

1 const Person = function(name,age){
2 this.name=name;
3 this.age=age;
4 this.sayName(){
5 console.log(this.name)
6 }
7 }
8 const p1 = new Person('Billy',21);

  构造函数的主要问题就存在于此,构造函数定义的方法会在每个实例上都创建一遍,即每次定义函数时都会初始化一个对象。即可以看似为:

1 const Person = function(name,age){
2 this.name=name;
3 this.age=age;
4 this.sayName = new Function(){
5 "console.log(this.name)"
6 };
7 }
8 const p1 = new Person('Billy',21);

  因此,以这种方法创建函数会带来不同的作用域链和标识符解析,不同实例上函数虽然同名但是却不相等。因为都是一样的效能,所以没有必要定义两个不同的函数。

  要解决这个问题,可以把函数定义在全局,即从外部插入函数。

1 function sayName(){
2 console.log(this.name);
3 }
4 const Person = function(name,age){
5 this.name=name;
6 this.age=age;
7 this.sayName = sayName;
8 }
9 const p1 = new Person('Billy',21);

  这样便解决了相同逻辑的函数重复定义的问题,但是这样会污染全局命名空间,若这个对象需要多个方法,则需要在全局作用域定义大量函数,这样会严重污染全局作用域。因此使用原型模式便成为了唯一方法。

3、原型模式

  使用原型对象的好处是在上面定义的属性和方法可以被对象实例共享。代码如下:

1 function Person3(){
2 Person3.prototype.name='Billy';
3 Person3.prototype.age=21;
4 }
5 const p7 = new Person3;
6 const p8 = new Person3;
7 console.log(p7.name); //Billy
8 console.log(p7.name); //Billy

  绑定在构造函数上的属性实例都可以取到。这样便实现了属性共享,在构造函数中绑定函数也可以共享,这便解决了之前的所有问题。由此可见原型的重要性 :

  • 新创建的对象都有明显标识。
  • 可共享方法,且不会重复定义。
  • 不会污染全局命名空间。

javascriptRemke之原型的重要性的更多相关文章

  1. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  2. 《JavaScript 闯关记》之原型及原型链

    原型链是一种机制,指的是 JavaScript 每个对象都有一个内置的 __proto__ 属性指向创建它的构造函数的 prototype(原型)属性.原型链的作用是为了实现对象的继承,要理解原型链, ...

  3. 何为JavaScript原型?读完你就明白了

    熟悉软件开发的朋友都知道,原型是产品或数据系统的一个基本的实用模型,通常为示范目的或开发程序的部份结构.原型的重要性不言而喻,接下来我就会为你讲解关于JavaScript中的原型概念.原型对象释义每一 ...

  4. 史上最全的Android开发学习教程集锦【初学者】

    根据Google的报告,截止2017年5月为止,Android活跃用户已超过20亿,并还在持续增长中.Android系统在几个主要的市场上已超过了iOS系统,特别是在美国,欧洲和日本,然而苹果确实在中 ...

  5. 深入理解javascript原型和闭包 (转)

    该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...

  6. 深入理解javascript原型和闭包(完结)

    原文链接:http://www.cnblogs.com/wangfupeng1988/p/3977924.html 说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascr ...

  7. 初涉JavaScript模式 (6) : 原型模式 【二】

    原型与in操作符 有两种方式使用in操作符:单独使用和在for-in循环中使用. 在单独使用时,in操作符会遍历实例公开(可枚举)的属性,如果找到该指定属性则返回true,无论该指定属性是存在与实例中 ...

  8. JS中面向对象的,对象理解、构造函数、原型、原型链

    6.1 理解对象 6.1.1 对象属性类型 ECMS属性有两种类型:数据属性和访问器属性 1 数据属性 [[configurable]] 表示能否通过Delete 删除属性从而从新定义属性,能否修改属 ...

  9. JavaScript之面向对象学习五(JS原生引用类型Array、Object、String等等)的原型对象介绍

    1.原型模式的重要性不仅仅体现在创建自定义类型方面,就连所有的原生的引用类型(Obejct.Array.String等等)都在构造函数的原型上定义方法和属性.如下代码可以证明: alert(typeo ...

随机推荐

  1. Java基础和常用框架的面试题

    前言 最近学校也催着找工作了,于是刷了一些面试题,学习了几篇大佬优秀的博客,总结了一些自认为重要的知识点:听不少职场前辈说,对于应届毕业生,面试时只要能说到核心重要的点,围绕这个点说一些自己的看法,面 ...

  2. Learning ROS: Managing System dependencies

    Download and install the system dependencies for turtlesim: roscd turtlesim cat package.xml rosdep i ...

  3. Core3.1WebApi使用MongoDB

    好久没有使用MongoDB了,重新测试使用,版本不一样之前很多方法都使用不了了,下面为部分测试,下次再来更新测试 测试中使用的命令 // 新增读写的用户 db.createUser({ user:'f ...

  4. MySQL列举常见的关系型数据库和非关系型都有那些?

    关系型数据库: Oracle.DB2.Microsoft SQL Server.Microsoft Access.MySQL 非关系型数据库: NoSql.Cloudant.MongoDb.redis ...

  5. OpenCV配置及使用(Eclipse)

    1.首先下载OpenCV,下载的时候,选择windows版的.然后安装,直接点击exe文件即可,安装过程实际就是一个解压的过程.2.注意解压之后的目录,opencv\build\java下的jar文件 ...

  6. Linux 安装 Harbor 私有镜像仓库

    下载 最新发行:https://github.com/goharbor/harbor/releases # 下载文件 wget https://github.com/goharbor/harbor/r ...

  7. 聊聊 Jmeter 如何并发执行 Python 脚本

    1. 前言 大家好,我是安果! 最近有小伙伴后台给我留言,说自己用 Django 写了一个大文件上传的 Api 接口,现在想本地检验一下接口并发的稳定性,问我有没有好的方案 本篇文章以文件上传为例,聊 ...

  8. 20210716考试-NOIP16

    考场时Prim的 $i$ 写成 $k$ 100->0 rank1->rank23 T1 Star Way To Heaven 考场正解:假设你要二分答案,则几个圆组成几道"屏障& ...

  9. IKEv2协议关键知识点总结整理

    文章目录 @[toc] 1. IKEv2基本原理 2. IKEv2协议重点注意事项 2.1 情景一:==IKEv2协商密钥逻辑== ①密钥协商流程 ②函数调用关系 ③流程简述 2.2 情景二:==使用 ...

  10. 将dict.define转化成dict.txt

    在使用捷通智能灵云外呼系统V6.1时.需要大量使用到模式码,也就是正则表达式.而老版本365还是使用场景文件. 当要将老版本改编成新版本的时候,需要需要将dict.define文件中的一行行的词条用& ...