Web

JS中的原型对象

2019-07-26  本文已影响1人  追逐_chase
web.jpeg

前面我们已经知道创建对象的多种方式对象的认知，其中自定义构造函数在创建对象时方便使用，但是存在一个小问题

1. 自定义构造函数 和 对象实例之间的关系

 //构造函数
  function Person(name,age){
      this.name = name;
      this.age = age;
  }

  //创建实例
  var per = new Person("CC",18);
  //打印对象的所有属性和方法
  console.dir(per);
  //打印构造函数的所有属性和方法
  console.dir(Person);

  console.log(per.__proto__.constructor == Person);
  // constructor 是实例对象的构造器（构造函数）
  // per这个实例是通过Person构造函数创建的
  console.log(per.constructor == Person);
image.png

实例对象和构造函数之间的关系
1.实例对象是通过构造函数创建的 --->创建的过程叫做实例化
2.如何判断对象是不是一个类的实例
- 通过构造器的方式，per.__proto__.constructor == Person
- 通过 instanceof

清楚了实例和构造函数之间的关系后，那么我们自定义构造函数到底存在什么问题呢?
  //构造函数
  function Person(name,age){
      this.name = name;
      this.age = age;
      //实例方法
      this.paly = function(){
          console.log("玩耍呢-----");
          
      }
  }

//创建实例
  var per = new Person("CC",18);
  var per2 = new Person("TT",19);
  console.log(per.paly == per2.paly);

//打印是fale

上面的代码我们可以推断出，创建的2个对象的方法 并不是同一个方法，如果我们创建100的对象，跟着构造函数就会创建出100个play方法,就好像一个学校有100人，给这100人中的每一个人都分配一个独立的厕所，这样就会浪费空间资源，那么怎么解决这个问题呢? 原型prototype

2 . prototype原型（给类添加共有的方法或者属性）

function Person(name,age){
        this.name = name;
        this.age = age;
    }
//原型添加 方法
 Person.prototype.sayHello = function(){
       console.log("我是:" + this.name);
   }

 var per = new Person("cc","age");
   //调用原型方法
   per.sayHello();
   console.log(per);
   
   var per1 = new Person("TT","120");

   per1.sayHello();
   console.log(per1);

//同一个函数
console.log(per1.sayHello == per.sayHello);
image.png

构造函数创建的时候，系统会默认创建一个对象与之关联，这个对象就是 原型对象

以构造函数创建的对象中，都会有一个 隐含的属性__proto__，指向该构造函数的原型对象,然而每一个构造函数都有一个prototype 指向原型对象

  1. 构造函数创建实例对象
    2.构造函数有prototype 属性，指向原型对象
    3.实例对象有__proto__(IE没有此属性)原型属性 是指向原型对象
    4.原型对象中有constructor构造器指向构造函数
    5.构造函数的原型对象prototype中的方法是可以被实例对象直接访问的
image.png
2.1 原型对象的数据共享
  //构造函数
  function Person(name,age){
      this.name = name;
      this.age = age;

  }

//原型对象的属性
  Person.prototype.height = "1.80";
 var per1 = new Person();
  console.dir(per1);
  console.dir(per1.height);
  console.dir(Person);
image.png

上面的代码中我们可以知道，实例对象使用的属性或者方法,优先在自己的实例中查找，如果找到就直接使用，如果找不到就去实例对象的__proto__指向的原型对象中查找，找到使用，没有报错

替换系统的原型对象

我们知道 构造函数有一个prototype属性指向系统的原型对象，而系统的原型对象有一个原型构造器constructor指向构造函数

如果我们需要自定义共享的属性和方法过多时，系统的原型对象有时满足不了，就需要我们自己定义一个对象，赋值给原型对象
   //构造函数
  function Person(name,age){
      //构造函数内部会创建一个对象
      //并把这个对象赋值给 this
      this.name = name;
      this.age = age;

  }

//原型是对象，那么就有有对象的创建方式
  Person.prototype = {
     constructor:Person,
      height:1.80,
      wight:"55KG",
      play:function(){
          console.log("很会玩");
          
      },
  _init:function(){

      },
      update:function(){
          
      }
  };

在创建原型对象时constructor这个属性一定要存在的，且必须指向构造函数

console.log(per1.hasOwnProperty("name")); //返回true就说明有这个属性 

console.log(per1.hasOwnProperty("a")); //返回false就说明没有这个属性
上一篇 下一篇

猜你喜欢

热点阅读