快速认识原型

前 言

在JavaScript中,我们可以通过操作原型来模拟继承。
学习继承之前,我们需要先要了解以下JavaScript中的原型对象。


1. __prto__ 和 prototype 的区别

对 象具有 _proto_ 属性,可称为 “隐式原型” 。一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。
方 法这个特殊的对象,除了拥有上述的 _proto_ 属性,prototype 属性为方法独有。
当我们创建实例化对象时,对象中的 _proto_ 属性则默认指向函数 prototype 属性。

    function Person(name){
    
    
        this.name = name;
        this.sayName = function(){
    
    
            console.log(`我叫${
      
      this.name}`)
        }
    }
    var person1 = new Person();//实例化Person构造方法
    var person2 = new Person();
    
    t.__proto__ === test.prototype;// true 

代码运行机制:

  1. 创建一个自定义的构造函数后,它的原型对象默认只会有 contructor属性,其他属性和方法都是从Object继承而来的.

constructor属性返回对创建此对象的函数体。

  1. 当调用构造函数创建一个新实例后,该实例的内部将包含一个指针,指向构造函数的原型对象。ECMA5中称这个指针叫 [[prototype]]。虽然在脚本中没有标准的访问 [[prototype]] 方式,但Firefox、Safari和Chrome中,属性__proto__是对访问 [[prototype]] 的实现。而在IE浏览器中,这个属性则是完全不可见的。不过要明确的真正一点就是,这个连接存在于实例对象和构造函数的原型对象(即构造方法名.prototype)之间,而不是存在于实例和构造函数之间。
    在这里插入图片描述

继承

// 定义一个Person类
      function Person(name, age) {
    
    
          this.name = name;
          this.age = age;
          //定义一个info函数
          this.info = function() {
    
    
              document.writeln("年龄" + this.age + "姓名" + this.name);
          }
      }
      //创建Person类的实例对象
      var p1 = new Person('xiaoming', 20);
      //调用p1的info方法
      p1.info();

      //为Person类增加walk方法
      Person.prototype.walk = function() {
    
    
          document.writeln(this.name + '正在走<br/>');
      }
      var p2 = new Person('xiaohong', 20);
      //p2可以调用Person中的方法
      p2.info();
      //也可以调用prototype属性增加的方法
      p2.walk();
      //JS允许为类动态增加方法和属性,这里p1也可以调用walk
      p1.walk();

在对象原型上添加的属性或者方法,实例出来的构造方法对象都可以访问到它原型上的东西。从而就实现了“子继父业”。

参考

CSDN:[[https://blog.csdn.net/q5706503/article/details/82947977]]

猜你喜欢

转载自blog.csdn.net/qq_35370002/article/details/108180933