JS 构造函数、原型和原型链

241 阅读2分钟

JS知识点

构造函数

ECMAScript 中的构造函数是用于创建特定类型对象的。其实就是创建自定义类的,以函数的形式为 自己的对象类型定义属性和方法。

区别于普通函数: 构造函数首字母一般大写,用new来调用。

  🌰 构造函数的使用
  
  function Person(name, sex, age) {
      this.name = name
      this.sex = sex
      this.age = age
      this.eating = function() {
          console.log(this.name + '正在吃饭')
      }
  }
  
  let zhangsan = new Person('张三', '男', 18)
  
  console.log(zhangsan) // Person{name: '张三', sex: '男', age: 18, eating: [Function (anonymous)]}
  
 console.log(zhangsan.name) // 张三
 
  console.log(zhangsan.eating()) // 张三正在吃饭

    

以上我们创建了一个名为Person的构造函数, 并且创建了一个【 zhangsan 】的实例对象。

构造函数执行时和普通函数的区别:

2.png

可以看出最大的区别就是在执行函数时,构造函数会创建一个实例对象,this指向这个实例对象。

原型和原型链

我们讲JS的面向对象中有一个要素时继承,那么JS里是怎么实现继承的呢?

JS是依靠原型链来实现继承的

继承关系其实就是一个链带关系,而JS中这链带的起点是 null

而组成链带结构,众所周知子节点要知道他的父节点是谁才能关联上。而prototype__proto__就是来关联这种关系的,我们称他们为“原型”,而根据原型从而组成的这一种链带关系,称为原型链。

prototype__proto__

  • 大部分函数(重点是构造函数)都内置一个prototype(原型「显式原型」)的属性,属性值是一个对象,对象中存储的属性和方法,是供当前类所属实例,调用的“公共”的属性和方法
    • 箭头函数是没有prototype属性的
    • 在原型对象上有一个内置的属性 constructor(构造器),属性值是当前函数本身
  • 每一个对象都内置一个__proto__(原型「隐式原型」)的属性,属性值指向自己所属类的原型prototype对象
    • Object.prototype这个对象的__proto__值是null,因为Object是所有对象的“基类”

🌰

我们创建一个数组时,明明没有像split、forEach...的方法,那为什么我们的数组能够直接使用他们呢,这就是因为有原型链的关系。

    let arr = [10, 20, 30]
    

我们let一个数组arr,相当于给JS中 Array 类(构造函数)创建了一个数组实例对象 而对象都自带__proto__指向它所属的类,当我们使用concat,push等方法时,首先JS会在私有属性中寻找,当他发现自己没有这个属性或者方法时,就会去他的父级,也就是Array.prototype中去找,找到了,调用,没找到, 接着根据原型往上找,以此往复,直到找到 null。

1.png