IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    JavaScript - 原型及原型链

    发表于 2022-07-15 00:00:00
    love 0

    原型

    __proto__

    • __proto__ 是每个 JavaScript 对象(除了 null)都有的一个内部属性,它指向该对象的构造函数的原型对象(即 prototype 属性)。这是一种隐式原型
    • __proto__ 决定了对象的原型链。如果我们访问一个对象的属性或方法,而该对象本身没有这个属性或方法,JavaScript 会沿着 **proto** 指向的原型链向上查找,直到找到该属性或方法,或者到达原型链的顶端 null
    const obj = {}
    console.log(obj.__proto__ === Object.prototype) // true
    
    const arr = []
    console.log(arr.__proto__ === Array.prototype) // true
    

    prototype

    • prototype 是函数对象的一个属性。每当我们定义一个函数时,JavaScript 引擎会为这个函数自动创建一个 prototype 属性,该属性是一个对象(默认情况下只包含一个 constructor 属性,指向这个函数本身)
    • prototype 是用于实现 JavaScript 继承的关键机制。当一个函数被用作构造函数来创建对象时,所有通过该构造函数创建的对象都将共享这个 prototype 对象中的属性和方法
    • 简单来说,该函数实例化的所有对象的 proto 的属性指向这个对象,它是该函数所有实例化对象的原型
    function Person(name) {
      this.name = name
    }
    
    Person.prototype.sayHello = function () {
      console.log(`Hello, my name is ${this.name}`)
    }
    
    const person1 = new Person('Alice')
    const person2 = new Person('Bob')
    
    person1.sayHello() // "Hello, my name is Alice"
    person2.sayHello() // "Hello, my name is Bob"
    

    原型链

    原型链是由对象通过 __proto__ 连接形成的链条。当你访问一个对象的属性或方法时,如果这个对象本身没有该属性或方法,JavaScript 会沿着 __proto__ 指向的原型链向上查找,直到找到该属性或方法,或到达原型链的顶端 null

    原型链使得 JavaScript 的继承机制成为可能。通过原型链,一个对象可以继承另一个对象的属性和方法

    const obj = {}
    obj.__proto__ === Object.prototype // true
    
    //原型链是: obj -> Object.prototype -> null
    obj.__proto__ (或 Object.prototype)
     |
     |--> Object.prototype (如 toString, hasOwnProperty 等方法)
     |
     |--> null
    
    const arr = []
    arr.__proto__ === Array.prototype // true
    
    //原型链是 arr -> Array.prototype -> Object.prototype -> null
    arr.__proto__ (或 Array.prototype)
     |
     |--> Array.prototype (如 push, pop, forEach 等数组方法)
     |
     |--> Object.prototype (如 toString, hasOwnProperty 等方法)
     |
     |--> null
    
    const str = 'str'
    str.__proto__ === String.prototype // true
    
    //原型链是 str -> String.prototype -> Object.prototype -> null
    str.__proto__ (或 String.prototype)
     |
     |--> String.prototype (如 toUpperCase, toLowerCase 等字符串方法)
     |
     |--> Object.prototype (如 hasOwnProperty, toString 等方法)
     |
     |--> null
    
    function Animal() {}
    Animal.prototype.eat = function() {
     console.log('Eating');
    };
    
    function Dog(name) {
     this.name = name;
    }
    Dog.prototype = new Animal(); // Dog 继承了 Animal
    Dog.prototype.constructor = Dog;
    
    const dog = new Dog('Buddy');
    dog.eat(); // "Eating"
    
    dog.__proto__ (Dog.prototype)
     |
     |--> Animal.prototype (包含 eat 方法)
     |
     |--> Object.prototype (包含 toString, hasOwnProperty 等方法)
     |
     |--> null
    

    总结

    • __proto__ :是对象的隐式原型,指向其构造函数的 prototype ,用于实现属性和方法的查找。
    • prototype:是函数对象的属性,用于定义构造函数创建的实例共享的属性和方法。
    • 原型链:通过 __proto__ 连接多个对象形成的链条,实现对象属性和方法的继承。

    通过这三个概念,JavaScript 实现了灵活的继承机制,使得对象可以共享和继承其他对象的属性和方法。这种机制与基于类的继承有所不同,但同样提供了强大的继承能力



沪ICP备19023445号-2号
友情链接