JavaScript之原型（prototype）

最新推荐文章于 2020-08-08 23:48:39 发布

jhkkk_

最新推荐文章于 2020-08-08 23:48:39 发布

阅读量167

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linjiehuijh/article/details/84786974

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

- - 原型

原型

Javascript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。
这个对象的所有属性和方法，都会被构造函数的实例继承。

这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

原型的作用之一:共享数据,节省内存空间

function Person (name, age) {
  this.name = name
  this.age = age
}

console.log(Person.prototype)

Person.prototype.type = 'human'

Person.prototype.sayName = function () {
  console.log(this.name)
}

var p1 = new Person(...)
var p2 = new Person(...)

console.log(p1.sayName === p2.sayName) // => true

这时所有实例的 type 属性和 sayName() 方法，
其实都是同一个内存地址，指向 prototype 对象，因此就提高了运行效率。

构造函数、实例、原型三者之间的关系

在这里插入图片描述
构造函数可以实例化对象
构造函数中有一个属性叫prototype,是构造函数的原型对象
构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
实例对象的原型对象(proto)指向的是该构造函数的原型对象
构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
任何函数都具有一个 prototype 属性，该属性是一个对象。

function F () {}
console.log(F.prototype) // => object

F.prototype.sayHi = function () {
  console.log('hi!')
}

构造函数的 prototype 对象默认都有一个 constructor 属性，指向 prototype 对象所在函数。

console.log(F.constructor === F) // => true

通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__。

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true

`__proto__` 是非标准属性。

实例对象可以直接访问原型对象成员。

instance.sayHi() // => hi!

总结：

任何函数都具有一个 prototype 属性，该属性是一个对象
构造函数的 prototype 对象默认都有一个 constructor 属性，指向 prototype 对象所在函数
通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__
所有实例都直接或间接继承了原型对象的成员

属性成员的搜索原则：原型链

了解了 构造函数-实例-原型对象 三者之间的关系后，接下来我们来解释一下为什么实例对象可以访问原型对象中的成员。

每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性

搜索首先从对象实例本身开始
如果在实例中找到了具有给定名字的属性，则返回该属性的值
如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性
如果在原型对象中找到了这个属性，则返回该属性的值

也就是说，在我们调用 person1.sayName() 的时候，会先后执行两次搜索：

首先，解析器会问：“实例 person1 有 sayName 属性吗？”答：“没有。
”然后，它继续搜索，再问：“ person1 的原型有 sayName 属性吗？”答：“有。
”于是，它就读取那个保存在原型对象中的函数。
当我们调用 person2.sayName() 时，将会重现相同的搜索过程，得到相同的结果。

而这正是多个对象实例共享原型所保存的属性和方法的基本原理。

总结：

先在自己身上找，找到即返回
自己身上找不到，则沿着原型链向上查找，找到即返回
如果一直到原型链的末端还没有找到，则返回 undefined

实例对象读写原型对象成员

读取：

先在自己身上找，找到即返回
自己身上找不到，则沿着原型链向上查找，找到即返回
如果一直到原型链的末端还没有找到，则返回 undefined

值类型成员写入（实例对象.值类型成员 = xx）：

当实例期望重写原型对象中的某个普通数据成员时实际上会把该成员添加到自己身上
也就是说该行为实际上会屏蔽掉对原型对象成员的访问

引用类型成员写入（实例对象.引用类型成员 = xx）：

同上

复杂类型修改（实例对象.成员.xx = xx）：

同样会先在自己身上找该成员，如果自己身上找到则直接修改
如果自己身上找不到，则沿着原型链继续查找，如果找到则修改
如果一直到原型链的末端还没有找到该成员，则报错（实例对象.undefined.xx = xx）

原型中方法的相互访问

<script>
   function Person(age) {
     this.age=age;
     this.sayHi=function () {
       console.log("考尼奇瓦");
       //打招呼的同时,直接调用吃的方法

     };
     this.eat=function () {
       console.log("吃东西啦");
       this.sayHi();
     };
   }
   //实例对象的方法,是可以相互调用的

   //实例化对象，并初始化
   var per=new Person(20);
   //调用方法
   //per.sayHi();
   per.eat();


    //原型中的方法,是可以相互访问的

    function Animal(name,age) {
      this.name=name;
      this.age=age;
    }
    //原型中添加方法
    Animal.prototype.eat=function () {
      console.log("动物吃东西");
      this.play();
    };
    Animal.prototype.play=function () {
      console.log("玩球");
      this.sleep();
    };
    Animal.prototype.sleep=function () {
      console.log("睡觉了");
    };

    var dog=new Animal("小苏",20);
    dog.eat();

    //原型对象中的方法,可以相互调用


  </script>

更简单的原型语法

我们注意到，前面例子中每添加一个属性和方法就要敲一遍 Person.prototype 。
为减少不必要的输入，更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象：

function Person (name, age) {
  this.name = name
  this.age = age
}

Person.prototype = {
  type: 'human',
  sayHello: function () {
    console.log('我叫' + this.name + '，我今年' + this.age + '岁了')
  }
}

在该示例中，我们将 Person.prototype 重置到了一个新的对象。
这样做的好处就是为 Person.prototype 添加成员简单了，但是也会带来一个问题，那就是原型对象丢失了 constructor 成员。

所以，我们为了保持 constructor 的指向正确，建议的写法是：

function Person (name, age) {
  this.name = name
  this.age = age
}

Person.prototype = {
  constructor: Person, // => 手动将 constructor 指向正确的构造函数
  type: 'human',
  sayHello: function () {
    console.log('我叫' + this.name + '，我今年' + this.age + '岁了')
  }
}