JavaScript 原型的理解

最新推荐文章于 2023-04-07 17:41:22 发布
最新推荐文章于 2023-04-07 17:41:22 发布
阅读量1.8k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Monster_man/article/details/77368446
版权

理解原型

一、什么是原型

原型是JavaScript中的继承的继承，JavaScript的继承就是基于原型的继承。

1.1 函数的原型对象

​ 在JavaScript中，我们创建一个函数A(就是声明一个函数)，那么浏览器就会在内存中创建一个对象B，而且每一个函数都默认会有一个属性prototype指向了这个对象(即：prototype的属性的值是这个对象)。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B默认会有一个属性constructor指向了这个函数A(意识就是说：constructor属性的值是函数A)。

​ 看下面的代码：

  <body>
    <script>
      /*
          声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
              创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
              有一个属性叫constructor 指向了这个函数
              
              注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
      */
      function Person (){
          
      }
    </script>
  </body>

下面的图描述了声明一个函数之后发生的事

1.2 使用构造函数创建对象

​ 当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候，那么这个对象就会存在一个默认的不可见的属性，来指向了构造函数的原型对象。这个不可见的属性我们一般用 [[proto]] 来表示，只是这个属性没有办法直接访问到。

​ 看下面代码：

  <body>
      <script type="text/javascript">
          function Person () {
              
          }   
          /*
              利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[proto]], 而且这个属性
              指向了构造函数的原型对象。
          */
          var p1 = new Person();
      </script>
  </body>

观察下面的示意图：

说明：

  1. 从上面的图示中可以看到，创建p1对象虽然使用的是Person构造函数，但是对象创建出来之后，这个p1对象其实已经与Person构造函数没有任何关系了，p1对象的[[ proto ]]属性指向的是Person构造函数的原型对象。

  2. 如果使用new Person()创建多个对象，则多个对象都会同时指向Person构造函数的原型对象。

  3. 我们可以手动给这个原型对象添加属性和方法，那么p1,p2,p3...这些对象就会共享这些在原型中添加的属性和方法。

  4. 如果我们访问p1中的一个属性name，如果在p1对象中找到，则直接返回。如果p1对象中没有找到，则直接去p1对象的[[proto]]属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型---原型链。 后面再讲)。

  5. 如果通过p1对象添加了一个属性name，则对p1对象来说就屏蔽了原型中的属性name。 换句话说：在p1中就没有办法访问到原型的属性name了。

  6. 通过p1对象只能读取原型中的属性name的值，而不能修改原型中的属性name的值。 p1.name = "李四"; 并不是修改了原型中的值，而是在p1对象中给添加了一个属性name。

看下面的代码

  <body>
      <script type="text/javascript">
          function Person () {        
          }
          // 可以使用Person.prototype 直接访问到原型对象
          //给Person函数的原型对象中添加一个属性 name并且值是 "Jack"
          Person.prototype.name = "Jack";
          Person.prototype.age = 20;
  ​
          var p1 = new Person();
          /*
              访问p1对象的属性name，虽然在p1对象中我们并没有明确的添加属性name，但是
              p1的 [[prototype]] 属性指向的原型中有name属性，所以这个地方可以访问到属性name的值。
              注意：这个时候不能通过p1对象删除name属性，因为只能删除在p1中删除的对象。
          */
          alert(p1.name);  // Jack
  ​
          var p2 = new Person();
          alert(p2.name);  // Jack  都是从原型中找到的，所以一样。
  ​
          alert(p1.name === p2.name);  // true
  ​
          // 由于不能修改原型中的值，则这种方法就直接在p1中添加了一个新的属性name，然后在p1中无法再访问到
          //原型中的属性。
          p1.name = "Mark";
          alert("p1：" + p1.name);
          // 由于p2中没有name属性，则对p2来说仍然是访问的原型中的属性。    
          alert("p2:" + p2.name);  // Jack  
      </script>
  </body>

二、与原型有关的几个属性和方法

2.1 prototype属性

​ prototype存在于构造函数中（其实任意函数中都有，只不过不是构造函数的时候prototype我们不关注而已），它指向了这个构造函数的原型对象。

2.2 constructor属性

​ constructor属性存在于原型对象中，他指向了构造函数

看下面的代码：

  <script type="text/javascript">
      function Person () {
      }
      alert(Person.prototype.constructor === Person); // true
      var p1 = new Person();
      //使用instanceof 操作符可以判断一个对象的类型。  
      //typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回objece。
      alert(p1 instanceof Person); // true
      alert(typeof p1); // object
  </script>

我们根据需要，可以为Person.prototype 属性指定新的对象，来作为Person的原型对象。

但是这个时候有个问题，新的对象的constructor属性则不再指向Person构造函数了。

看下面的代码：

  <script type="text/javascript">
      function Person () {
          
      }
      //直接给Person的原型指定对象字面量。则这个对象的constructor属性不在执行Person函数
      Person.prototype = {
          name:"Jack",
          age:20
      };
      var p1 = new Person();
      alert(p1.name);  // Jack
      // p1的类型仍然是Person
      alert(p1 instanceof Person); // true
      //constructor不再执行Peson函数
      alert(Person.prototype.constructor === Person); //false
      //如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
      /*
      Person.prototype = {
          constructor : Person    //让constructor重新指向Person函数
      }
      */
  </script>

2.3 __proto__属性(注意：左右各是2个下划线)

用构造方法创建一个新对象后，这个对象中默认会有一个不可访问的属性[[prototype]],这个属性就指向了构造方法的原型对象。

但是在个别浏览器中，也提供了对这个属性[[proto]]的访问属性(chrome浏览器和火狐浏览器。IE不支持)。访问方式：p1.__proto__

但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

  <script type="text/javascript">
      function Person () {
          
      }
      //直接给Person的原型指定对象字面量。则这个对象的constructor属性不在执行Person函数
      Person.prototype = {
          constructor : Person,
          name:"Jack",
          age:20
      };
      var p1 = new Person();
  ​
      alert(p1.__proto__ === Person.prototype);   //true
      
  </script>

2.4 hasOwnProperty() 方法

​ 大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[proto]]属性指向的原型。

​ 那么如何判断这个对象的来源呢？

​ hasOwnProperty方法，可以判断一个属性是否来自对象本身.

  <script type="text/javascript">
      function Person () {
          
      }
      Person.prototype.name = "Lucy";
      var p1 = new Person();
      p1.sex = "女";
      //sex属性是直接在p1属性中添加，所以是true
      alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
      // name属性是在原型中添加的，所以是false
      alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
      //  age 属性不存在，所以也是false
      alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));
      
  </script>

所以，通过hasOwnProperty这个方法可以判断一个属性是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。

也即是说，在原型中的属性和不存在的属性都会返回fasle。

这个也是唯一的一个处理属性而不查找原型链的方法！

如何判断一个属性是否存在于原型中呢？

2.5 in操作符

in操作符用来判断一个属性是否在这个对象中。查找这个属性时，先在对象本身中找，如果对象中找不到就在原型中找。也就是说，只要对象和原型任意一个地方存在这个属性，就返回true。

  <script type="text/javascript">
      function Person () {
          
      }
      Person.prototype.name = "Lucy";
      var p1 = new Person();
      p1.sex = "女";
      alert("sex" in p1);     // 对象本身添加的，所以true
      alert("name" in p1);    //原型中存在，所以true
      alert("age" in p1);     //对象和原型中都不存在，所以false
      
  </script>

回到前面的问题，如何判断一个属性是否存在与原型中。

如果一个属性存在，不在对象本身中，那就一定在原型中。

  <script type="text/javascript">
      function Person () {
      }
      Person.prototype.name = "Lucy";
      var p1 = new Person();
      p1.sex = "女";
      
      //定义一个函数去判断原型所在的位置
      function propertyLocation(obj, prop){
          if(!(prop in obj)){
              alert(prop + "属性不存在");
          }else if(obj.hasOwnProperty(prop)){
              alert(prop + "属性存在于对象中");
          }else {
              alert(prop + "对象存在于原型中");
          }
      }
      propertyLocation(p1, "age");
      propertyLocation(p1, "name");
      propertyLocation(p1, "sex");
  </script

三、组合使用原型模型和构造函数模型创建对象

3.1 原型模型创建对象的缺陷

原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。

但是在实际使用中，每个对象的属性一般是不同的。Jack的姓名是Jack，Mark的姓名是Mark。

但是，这个共享特性对方法(属性值是函数的属性)又是非常合适的。所有的对象共享方法是最佳状态。这种特性在c#和Java中是天生存在的。

3.2 使用构造函数模型创建对象的缺陷

在构造函数中添加的属性和方法，每个对象都有自己独有的一份，大家不会共享。这个特性对属性比较合适，但是对方法又不太合适。因为对所有对象来说，他们的方法应该是一份就够了，没有必要每人一份，造成内存的浪费和性能的低下。

  <script type="text/javascript">
      function Person() {
          this.name = "Jack";
          this.age = 20;
          this.eat = function() {
              alert("Eat good");
          }
      }
      var p1 = new Person();
      var p2 = new Person();
      //每个对象都会有不同的方法
      alert(p1.eat === p2.eat); //fasle
  </script>

可以用下面的方法解决：

  <script type="text/javascript">
      function Person() {
          this.name = "Jack";
          this.age = 20;
          this.eat = eat;
      }
      function eat() {
          alert("Eat good");
      }
      var p1 = new Person();
      var p2 = new Person();
      //因为eat属性都是赋值的同一个函数，所以是true
      alert(p1.eat === p2.eat); //true
  </script>

但是上面的方法有个致命的缺陷：就是封装性太差。使用面向对象，目的之一就是封装代码，这个时候为了性能又要把代码抽出对象之外，这是反人类的设计。

3.3 使用组合模式解决上述两种缺陷

原型模式适合封装方法，构造方法模式适合封装属性，综合两种模式优点就有了组合模式。

  <script type="text/javascript">
      //在构造方法内部封装属性
      function Person(name, age) {
          this.name = name;
          this.age = age;
      }
      //在原型对象内封装方法
      Person.prototype.eat = function (food) {
          alert(this.name + "Eat" + food);
      }
      Person.prototype.play = function (playName) {
          alert(this.name + "Play" + playName);
      }
      
      var p1 = new Person("Jack", 20);
      var p2 = new Person("Mark", 30);
      p1.eat("apple");
      p2.eat("orange");
      p1.play("football");
      p2.play("games");
  </script>

四、动态原型模式创建对象

前面讲到的组合模式，也并非完美无缺，就是把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。

动态原型模式把所有的属性和方法都封装在构造方法中，只需要在需要的时候才去在构造方法中初始化原型，而且保持了同时使用构造函数和原型的优点。

看下面代码：

  <script type="text/javascript">
      //构造方法内部封装属性
      function Person(name, age) {
          //每个对象都添加自己的属性
          this.name = name;
          this.age = age;
          /*
              判断this.eat这个属性是不是function，如果不是function则证明是第一次创建对象，
              则把这个funcion添加到原型中。
              如果是function，则代表原型中已经有了这个方法，则不需要再添加。
              perfect！完美解决了性能和代码的封装问题。
          */
          if(typeof this.eat !== "function"){
              Person.prototype.eat = function () {
                  alert(this.name + " Eat good");
              }
          }
      }
      var p1 = new Person("Jack", 40);
      p1.eat();   
  </script>

说明

  • 组合模式和动态原型模式是JavaScript中使用比较多的两种创建对象的方式。

  • 建议以后使用动态原型模式。他解决了组合模式的封装不彻底的缺点。

Monster_man
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
js原型
havedreamning的博客
02-23 4102
什么是js原型 js原型也叫做js原型对象是一种对象属性， 在Javascript中，每一个函数，系统都会给这个函数一个属性，这个属性就是prototype。 prototype的作用 prototype对象属性多用于构造函数中， 因为在构造函数中构造函数的每个方法都是需要在实际运用的对象中重新创建一遍，不能重复使用的。 这样会对代码的编写会非常的麻烦和对内存资源造成浪费。 然而，使用proto...
对js原型和原型链的理解
qq_45770253的博客
08-11 3225
       学习到 JavaScript 原型这个地方的时候，最开始是比较懵的状态，今天早上起来看了下红宝书中对于原型的解释，慢慢的也就有了些了解，但是解释的比较官方。接下来，我会把自己的理解分享下来，尽量用通俗易懂的话来描述。如果有什么不对的地方，希望大家指正。 1、原型 1.1 prototype        JavaScript 中，当我们创建一个函数的时候
原型链的继承都发生在构造函数上
前端菜鸟
01-13 298
原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有”prototype”属性，函数对象有”prototype”属性，原型对象有”constructor”属性。 一、初识原型 在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。
JavaScript原型和原型链（详细解读）
程麒阁的博客
04-09 7802
原型和原型链 一、原型概述 1.概念 原型在JavaScript是一个很重要的概念，它是面向对象可以继承的基础。知道吗，JavaScript的设计模式就是原型模式（二十三个经典设计模式之一），正是因为它有这个模式，所以它才十分的灵活。可以基于原型模式实现更多的面向对象设计模式。 二、原型链 1.什么是原型链？ 原型链是原型的查找机制，是一条寻址链。其实原型上的方法或属性查找，都是按照一定的顺序沿着原型链进行查找的。如果查找到最后仍然没有找到这个原型和方法，那么JS就会抛出没有这个属性或方法的异常。 2.什么
什么是js的原型以及原型链
vet_then_what的博客
06-29 1394
JavaScript中其实并没有类的概念。从es6通过关键字才引入了这个概念，但是ES6的可以看作是一个语法糖，它的绝大部分功能，ES5都可以做到。。es6之前，实现生成实例对象的传统方法是通过构造函数。将实例对象与构造函数连接起来的就是与。JavaScript中有两个原型：但是，这两种原型并不存在于JavaScript的所有对象中。那么在哪里可以体现出这两个原型呢？先看代码： 结果如下：可以看到：数组、对象、函数三个引用类型都有属性（隐式原型）只有函数除了之外还有一个属性（显式原型）所有的函数默认都会拥有
JS原型和原型链详解
最新发布
Zhang_wang_yun的博客
04-07 1287
原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。说到原型会涉及两个概念：构造函数、原型对象。
理解JavaScript原型链
10-21
简单说一说对JavaScript原型链的理解,希望对大家学习JavaScript原型链有所帮助，具体内容如下
深入理解javascript原型和闭包.pdf
10-26
javascript原型和闭包
深入理解javascript原型链和继承
10-25
主要介绍了javascript原型链和继承的概念，以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用，是篇非常不错的文章，这里推荐给大家。
JavaScript原型和继承
03-04
前几天看了《再谈js面向对象编程》，当时就请教哈大神，发现文章有的地方可能会造成误导（或者说和ECMA有出入），后来自己翻一翻ECMA，总算找到“标准”的理解……本文适合初学者，特别是对构造函数、原型和原型链...
js 原型对象和原型链理解
12-02
一个例子让你彻底明白原型对象和原型链 开篇 之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。 我们经常会这么写 function Person () { this.name = 'John'; } var person = new Person(); Person.prototype.say =
JS(原型和原型链）
热门推荐
姜皓的博客
05-10 3万+
(学习自慕课网《前端JavaScript 面试技巧》 JS(原型和原型链） 题目1.如何准确判断一个变量是数组类型 使用 instanceof 方法 题目2.写一个原型链继承的例子 实例：封装 DOM 查询 定义构造函数 Elem,属性封装成 id    打印出所有的 html   将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’ ...
jS原型
Jsoning的博客
11-28 5088
原型理解原型之前我们要知道什么是原型？js中万物皆对象，因此原型也是对象，可以通过原型实现对象属性的继承。什么是原型对象？ “我们创建的每个函数都有一个prototype(原型)属性（除了Function.bind()返回的函数），这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。” –摘自人民邮电出版社出版的Nicholas C.Zakas著
JS 原型的含义和使用
qq_45560350的博客
06-04 1391
定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。 对定义的解释： 所有的function对象都有一个系统自带的prototype属性，翻译过来即“原型”。假设有这么一个构造函数function Person(){}， function对象Person的prototype属性(即原型)也是一个对象，存在Person.prototype = {}，我们可以把Person.prototype理解为Perso.
[乐意黎转载]JavaScript中原型对象的彻底理解
打杂人
12-05 838
一、什么是原型 原型是Javascript中的继承的继承，JavaScript的继承就是基于原型的继承。 1.1 函数的原型对象 ​ 在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函
js中原型链的理解
weixin_43735593的博客
11-20 1万+
js原型链的理解 由于原型链涉及构造函数、函数Function、引用类型Object及特定的两个属性prototype和_proto_，因此在谈原型链前先搞清楚他们之间的关系； 1、函数必然有prototype和_proto_两个属性，所有的函数(包括自定义函数)都是Function实例的对象； 2、对象必然有_proto_属性，但不一定有prototype；实例的对象通过_proto_属性连接...
javascript中原型的理解
qq_63204040的博客
05-01 275
javascript原型理解
js原型相互调用
u014414110的博客
04-10 595
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 0000000ss </body> <script> /*function Perso...
js函数原型链
海涛高软
12-12 107
function show(a, b) { this.shu01 = a; this.shu02 = b; } show.prototype.jia = function() { return this.shu01 + this.shu02 } show.prototype.jian = function() { return this.shu01 - this.shu02 } console.log(show); var mm = new show(30, 25); .
深入理解JavaScript原型和闭包的核心机理
"深入理解javascript原型和闭包" javascript作为一门编程语言，具有许多独特的特性，其中原型和闭包是两大核心概念，对于理解javascript的工作机制和编程思想具有重要影响。本文将深入探讨javascript原型和闭包的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值