JavaScript-原型

拼搏现实的明天。 2022-05-28 14:09 188阅读 0赞

JavaScript-原型:原型是function对象的属性，它定义了构造函数制造出的对象的共同祖先。通过该构造函数生成的对象，继承了该原型的属性和方法。原型也是对象。

关键字:prototype 系统自带的属性

//Person.prototype={}
            function Person (){
    
            }
            var person=new Person();

在构造函数生成时，Person.prototype=\{\}就生成了，它是一个“空”的对象，是Person生成对象的公共祖先。

Person生成的对象继承了祖先（Person.prototype)的属性和方法。

看如下代码:

Person.prototype = {
                foot: "西红柿",
                drink: "牛奶"
                
            }
            function Person (){
                this.foot="土豆";
            }
            var person=new Person();

![70][]

可以看到，Person里面只有定义的foot属性是土豆，但是我在下面的操作中的确使用了属性drink，很明显这个属性是Person.prototype的，我们有注意到那foot属性不是也继承了吗？那为什么不是西红柿了？这个作用域链相似，如果自己已经有这个属性，那么就不往上面找了，也就是往祖先上面找了，没有就一直往上面找。

那么这个有什么用了？

我们看一下如下代码

Person.prototype = {
                grade:2016,
                school:"wust",
                profession:"computer science"
            }
            function Person (name,age,sex){
                this.name=name;
                this.age=age;
                this.sex=sex;
            }
            var person1=new Person("小明",18,"男");
            var person2=new Person("小红",18,"女");

![70 1][]

我们发现小明和小红是俩个不同的对象，他们各种有自己不同的name age sex属性，也有共同的grade school perfession属性（公共的祖先）

现在可以清楚了吧，原型可以很方便的处理对象共同拥有的属性。

既然原型也是一个对象，那么它肯定有增，删，改，查的操作。

对于原型的任何操作，都必须对原型直接操作，对构成函数产生的对象操作是无效的。//要记好

增：

![70 2][]

我们对原型操作是可以的，而对构造函数产生的对象操作的时候，是不行的，只能在它自己并非原型里面加上新的属性。

改 查同理咯

![70 3][]

删

![70 4][]

下面看一下prototype里面真的什么都没有吗？

function Person() {
    
            }
            var person=new Person();

我们看一下Person.prototype里面有撒？

![70 5][]

打开后看到里面里面有俩个浅紫色的属性:constructor和\_\_proto\_\_，浅紫色是系统自带的，隐式的。深紫色是自己定义的。

**constructor**：构造器，返回的是对象是由那个构造函数产生的。

![70 6][]

看一下如下代码:

function Person() {
    
            }
            function Car() {
    
            }
            Person.prototype={
                constructor: Car
            }
            var person=new Person();

![70 7][]

我们改变了Person.prototype里面的constructor属性，然后错认祖先了。嘿嘿

**\_\_proto\_\_**：放原型

看一下代码:

function Person() {
    
            }
            Person.prototype={
               name:'cyl'
            }
            var person=new Person();

![70 8][]

person的\_\_proto\_\_就是放的它的原型Person.prototype

new的三段式还记得吗？其实生成的this里面就有\_\_proto\_\_:Person.prototype,用于存放原型，对象找它的原型的时候就是通过\_\_proto\_\_来寻找的。这个值也是可以修改的，hehe.

function Person() {
            }
            Person.prototype={
               name:'cyl'
            }
            var obj={
                name:"lyc"
            }
            var person=new Person();
            person.__proto__=obj;

答案是什么?cyl还是lyc

![70 9][]

lyc因为原型已经被改了。

**原型链**

看如下代码：

Grade.prototype.name='cyl';
            function Grade (){
            }
            var grade=new Grade();
            Father.prototype=grade;
            function Father() {
            }
            var father=new Father();
            Son.prototype=father;
            function Son() {
    
            }
            var son=new Son();

![70 10][]

我们注意到son的确是在一层一层的找，找到Grade.prototype时才找了name，这个就是原型链，像作用域链一样一层一层的往上找，找了就返回了，那它一直往上吗？我们注意到Grade.prototype有\_\_proto\_\_,我们点开看看

![70 11][]

好多属性和方法，咦没有\_\_proto\_\_这个属性了，看来是顶层了。

看看是谁了，没错就是Object.prototype  Object的原型

![70 12][]

一样。

![70 13][]它就是老大了。

原型链上的增，删，改，差还是要自己改自己的，通过构造函数的对象修改还是不行的。

看一下如下代码:

function Father() {
                this.num=100;
            }
            var father=new Father();
            Son.prototype=father;
            function Son() {
            }
            var son=new Son();

![70 14][]

father.num改不了，但是son.num!=father.num？此时它们是俩个num了，son.num++等价与son.num=son.num+1;

son得到了一个num了。

第三种创建对象方式Object.create(原型 or null)

var obj= {
                name:'cyl'
            }
            var person=Object.create(obj);

那么根据obj原型生成了一个对象person

![70 15][]

**绝大部分对象都会继承Object.prototype,但是不是所有！！！**

var person = **Object** . **create**( null) ;

![70 16][]没有原型！！

[70]: /images/20220528/43f5da6c9564405398ea4799d92d7b9f.png
[70 1]: /images/20220528/bf234290f3c24c3cbc7e8cd74499b281.png
[70 2]: /images/20220528/3542446d2230422191711a68327bbd02.png
[70 3]: /images/20220528/6dd250e7409f4c1ab3e03fd812f2991f.png
[70 4]: /images/20220528/2c53ed958e814744b40710eb108fe2af.png
[70 5]: /images/20220528/a0b037f9729247a38d8696f2ea61ef4a.png
[70 6]: /images/20220528/ec7d49f16b74433091b990e6b166d52e.png
[70 7]: /images/20220528/eb64120c5b1640108192a1bc81803d3e.png
[70 8]: /images/20220528/d53d4ce30f6e4ea085d1a57375700381.png
[70 9]: /images/20220528/e142c2484b064dc4ac7b0fafc913afc2.png
[70 10]: /images/20220528/732a1d6505e443cc92c41825ff07818a.png
[70 11]: /images/20220528/1c8c48d13b49446b9409bc8ddd9353b8.png
[70 12]: /images/20220528/fc78b9127755476fb658bbd67fe5860d.png
[70 13]: /images/20220528/0f247f0cce02498cb7e4ac72f8fac130.png
[70 14]: /images/20220528/123228350d2146b98001862c398ddd2e.png
[70 15]: /images/20220528/a7884c80bc4545b4b48c01d819e579d2.png
[70 16]: /images/20220528/3855d5d2471e4a989fe93f4db504d624.png