再学一次「原型和原型链」

一、构造函数

1. 基本概念

构造函数和普通函数本质上没什么区别,一个函数是否是构造函数,与声明无关,而是由调用时是否使用new来决定。当使用new关键字调用函数时,便被叫做了构造函数。构造函数作用与工厂函数一致,都是用来创建对象的,但是代码更加简洁。构造函数命名通常采用首字母大写的方式,以便与普通函数和变量进行区分。

2. new关键字

代码演示

写一个构造函数,并创建两个实例对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>构造函数</title>
</head>
<body>
  <script>
    function Person(name,age){
      this.name = name
      this.age = age
    }

     const p1 = new Person('Du', 18)
     const p2 = new Person('Lu', 19)
     console.log(p1,p2);

  </script>
</body>
</html>

再学一次「原型和原型链」

new 工作原理

  1. 将刚刚代码里的p2改一下调用方式,不使用new关键字。
...
 const p1 = new Person('Du', 18)
 const p2 = Person('Lu', 19)
 console.log(p1,p2);
...
  1. 可以发现打印出的结果如下,p1会打印一个对象,p2则是undefined

再学一次「原型和原型链」
通过上面的代码,可以得到一个结论,使用new关键字调用的函数,帮我们创建了一个对象,并且赋值后return了这个对象。

new关键字在使用时做的工作:

  • (1)创建一个空对象
  • (2)把this指向这个对象
  • (3)对象的赋值
  • (4)返回这个对象

3. 在构造函数newreturn

如果在构造函数内部手动return,会有两种情况:

  • return 基本数据类型 : 手动return的内容无效
function Person(name,age){
   this.name = name
   this.age = age
   return 1
}

const p1 = new Person('Du', 18)
console.log(p1);  // Person
  • return 引用数据类型 : 手动return的内容有效
function Person(name,age){
   this.name = name
   this.age = age
   return ['a','b','c']
}

const p1 = new Person('Du', 18)
console.log(p1);  // ['a','b','c']

4. 构造函数的内部方法

Person内部添加一个吃东西的方法

function Person(name,age){
   this.name = name
   this.age = age
   this.eat = function(){
     console.log('吃东西')
   }
}

const p1 = new Person('Du', 18)
const p2 = new Person('Lu', 20)
console.log(p1,p2); 
// p1.eat和p2.eat是同一个函数吗?
console.log(p1.eat === p2.eat) 

再学一次「原型和原型链」

每次new的时候,都会执行一次function,就在堆内存里开辟一个新的空间,虽然代码一样,但是地址不同。就会导致每次调用一次构造函数,多出一个函数堆空间,导致内存资源的浪费。

针对这个问题,如果把这些公有方法放在原型对象里共享,则会避免上述问题。

二、原型对象

  1. 原型对象是什么?

    任何函数在声明的时候,会自动创建一个对象,称之为原型对象。

  2. 原型对象相关三个属性:构造函数、原型对象、实例对象三者关系

    prototype:属于构造函数,指向原型对象

    __proto__ : 属于实例对象,指向原型对象

    注意:这个属性不是web标准,很多浏览器不会显示的。这个属性在开发中不能使用,只能用于学习研究。

    constructor:属于原型对象,指向构造函数

    再学一次「原型和原型链」

  3. 静态成员:函数的属性

  4. 实例成员: 实例对象的属性

三、原型继承

面向对象三大特征:封装、继承、多态

通过将一个对象设置为另一个对象的原型,从而使得被设置的对象能够继承原型对象的属性和方法。

四、原型链

每一个对象都有自己的原型,而原型也是对象,也会有自己的原型,以此类推,形成链式结构,称之为原型链。(原型链的重点是null

对象访问原型链规则:(就近原则)对象先访问自己的,自己没有就找原型的,原型没有就找原型的原型,一直到原型链终点null。如果还找不到则获取undefined

再学一次「原型和原型链」

原文链接:https://juejin.cn/post/7258850712196317239 作者:DecSeven

(0)
上一篇 2023年7月24日 上午10:31
下一篇 2023年7月24日 上午10:42

相关推荐

发表回复

登录后才能评论