前言: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. 并发编程之:CountDownLatch

    大家好,我是小黑,一个在互联网苟且偷生的农民工. 先问大家一个问题,在主线程中创建多个线程,在这多个线程被启动之后,主线程需要等子线程执行完之后才能接着执行自己的代码,应该怎么实现呢? Thread. ...

  2. 20210716 noip17

    考场 终于有一场在晚上考了 T1 随便画了画就发现要求每个点的后继个数,想起来有 dfs 和 toposort 两种方法,感觉很稳 T2 裸的网络流有 70pts?!真香 一看 T3 就想起了 Mst ...

  3. Linux内核学习之工作队列

    Author       : Toney Email         : vip_13031075266@163.com Date          : 2020.12.02 Copyright : ...

  4. 这篇 Java 基础,我吹不动了

    Hey guys,这里是程序员cxuan,欢迎你收看我最新一期的文章,这篇文章我补充了一些关于<Java基础核心总结>的内容,修改了部分错别字和语句不通顺的地方,并且对内部类.泛型等内容进 ...

  5. Spring5(五)——AOP

    一.AOP 1.介绍 AOP(Aspect Oriented Programming),面向切面编程.它利用一种称为"横切"的技术,剖解开封装的对象内部,并将那些影响了多个类的公共 ...

  6. Python小技巧:这17个骚操作你都OK吗?

    导读:Python 是一门非常优美的语言,其简洁易用令人不得不感概人生苦短.本文中带我们回顾了 17 个非常有用的 Python 技巧,例如查找.分割和合并列表等.这 17 个技巧都非常简单,但它们都 ...

  7. Electron-vue项目使用 Inno Setup 创建安装包

    1.安装 Inno Setup 官网:https://jrsoftware.org/isinfo.php 2.打开 Inno Setup ,点击如下图Compli32.exe(首次安装默认打开) 3. ...

  8. Windows 11抢先体验

    SHA1值: 3B6DA9194BA303AC7DBBF2E521716C809500919C 谷歌云:https://drive.google.com/file/d/1sH0cBI9hwh8EdlV ...

  9. MapReduce原理深入理解(一)

    1.MapReduce概念 1)MapReduce是一种分布式计算模型,由Google提出,主要用于搜索领域,解决海量数据的计算问题. 2)MapReduce是分布式运行的,由两个阶段组成:Map和R ...

  10. 学习了解PHP中的SeasLog日志扩展

    今天来学习的扩展是和日志相关的一个扩展,对于 PHP 的日志应用来说,除了本身自带的 error_log() . syslog() 之外,在大多数的框架中还会经常见到 monolog 的踪影.当然,我 ...