说一说JavaScript 中的原型ProtoType

一时兴起，写一遍博客吧。

“函数是函数，函数也是对象” 相信学过js 的同学看到这句话很熟悉。我表示耳朵都听出茧子了。

我们都知道，在JavaScript中是没有类的概念的，那么怎么来new 一个对象呢？首先，来看一下我们写一个普通的构造函数。

 1 function Person(name, age, gender) {
 2             this.user_name = name;
 3             this.user_age = age;
 4             this.user_gender = gender;
 5
 6             this.sayHi = function () {
 7                 alert("我叫"+this.user_name+",我年芳"+this.user_age+"我是一个分流倜傥的"+this.user_age+"生");
 8             }
 9         }
10
11         //创建两个对象；
12         var p1 = new Person('李寻欢', 18, '男');
13         p1.sayHi();
14
15         var p2 = new Person('张无忌', 20, '男');
16         p2.sayHi();

很好 代码像我们想象的原样输出了。谁打印谁的互不相干。

从上面的代码我们可以看出来, p1 跟p2 之间是没有任何联系的，这很像C#里面的对象，每个对象保存自己的属性。这是js的优点。

但是，其中有一个匿名函数赋值给了 sayHi ，匿名函数也是对象，我们都知道对象是占内存的然而这就变成了一个缺点。因为当我们new 500个对象的时候，在内存中就会有500个sayHi 这是没必要的，因为都是那个函数，而属性是必须每个对象都要有自己的一份的。

如果你们说，属性都是自己独一份，你怎么知道他们调用的不是一个方法呢？你可以打开编辑器试着改改代码吗？我很懒的。

1         p1.user_name = '花无缺';
2         p1.user_age = '19';
3         p1.user_gender = '男';
4
5         p1.sayHi = null;   // 把p1的函数赋值 为null;
6
7         p1.sayHi(); // F12 一下 报错了
8         p2.sayHi(); //原样输出、

这下你们信了吧

那么怎么解决这个问题呢？就要用到了 ProtoType了。

我们把函数放到prototype原型对象里面去，调用的时候都从原型对象里面调用。

OK啊这样就解决了。那么怎么写代码呢？

 1         function Person(name, age, gender) {
 2             this.user_name = name;
 3             this.user_age = age;
 4             this.user_gender = gender;
 5
 6         }
 7         Person.prototype.sayHi = function () {
 8             alert("我叫" + this.user_name + ",我年芳" + this.user_age + "我是一个分流倜傥的" + this.user_gender + "生");
 9         }
10
11         //创建两个对象；
12         var p1 = new Person('李寻欢', 18, '男');
13         p1.sayHi();
14
15         var p2 = new Person('张无忌', 20, '男');
16         p2.sayHi();

嗨呀！皮呦怎么回事，我把 sayHi的函数给了 prototype 这个原型对象怎么跟p1 p2 关联起来的？

先说一下你们认为 user_name,user_age....等等属性是谁的？是Person函数对象的？通过Person创建的p1 p2中能点出来 prototype？

完全不是，user_name,user_age 属性是创建的对象的而不是Person的。prototype是函数对象才有的，普通对象是没有的。

举个例子：就像一个妈妈肚子里怀着一个宝宝，宝宝头嘴角有颗美人痣，那么这个痣是宝宝自己的，不是他妈妈的。

具体到代码里面就是 Person.constructor 有个这个构造函数，当创建对象的时候，内部调用构造函数执行 user_age user_name ..这个段代码，p1 p2 里面才会有。

先看下面这幅图，我再具体说一下；

在创建的每一个对象中，都有一个 __proto__ 这么一个属性，在我们使用p1.sayHi的时候他会首先在自己里面找这个方法，找不到就会通过__proto__这个属性找到原型对象，

去调用原型对象里面的方法。如果在原型对象里面没找到的话，没关系，原型对象中也有一个__proto__属性，相信大家也猜到了，这是不是非常像C#中的继承？

对的。 js是通过原型对象来实现继承的。

总算写完了。

转载请说明出处

转载于:https://www.cnblogs.com/ZeedLee/p/8001053.html

说一说JavaScript 中的原型ProtoType相关推荐

JavaScript中的原型(prototype)与继承
在JavaScript中,原型是用来模仿其他「类」语言继承机制的基础.原型并不复杂,原型只是一个对象. 一.原型对象 1.1 什么是原型对象每当我们创建了一个函数后,这个函数就拥有了一个protot ...
浅谈JavaScript中的原型prototype
之前看过一些关于原型的知识,但总是看了以后没有及时应用,导致再看到一些代码是遇到还是搞不清楚,借此机会谈一下我对prototype的理解. 1.再谈原型之前,我们要知道什么是构造器函数,型如下例: f ...
JavaScript中的原型prototype及原型链
原型prototype 简介: prototype里面放置了一种类的公用的方法(构造函数:constructor)和类的信息.因此可以用来作为一种类的共享数据实现机制.这种共享的另一个好处的是减少了内 ...
JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
理解JavaScript中的原型与原型链
理解JavaScript中的原型与原型链原型链是一种机制,指的是JavaScript中每个内置的对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性.原型链的 ...
理解原型设计模式以及JavaScript中的原型规则
原型规则原型规则所有的引用类型(数组.对象.函数),都具有对象特征,即可自由扩展属性: var arr = []; arr.a =1; 所有的引用类型都有对象的特性,即可自由扩展所有的引用类型都 ...
js中的原型(prototype)是什么?如何理解?
JavaScript是一种通过原型实现继承的语言与别的高级语言是有区别的,像java,C#是通过类型决定继承关系的,JavaScript是的动态的弱类型语言,总之可以认为JavaScript中所有都是 ...
理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
Javascript中的原型链、prototype、__proto__的关系
javascript 2016-10-06 1120 9 上图是本宝宝用Illustrator制作的可视化信息图,希望能帮你理清Javascript对象与__proto__.prototype和 ...

说一说JavaScript 中的原型ProtoType

说一说JavaScript 中的原型ProtoType相关推荐

最新文章

热门文章