乐趣区

关于javascript:原型与原型链详解

前言

与大部分面向对象语言不同,ES6 之前并没有引入类(class)的概念,JavaScript 并非通过类而是间接通过构造函数来创立实例。在介绍原型和原型链之前,咱们有必要先温习一下构造函数的常识。

一、构造函数

构造函数模式的目标就是为了创立一个自定义类,并且创立这个类的实例。构造函数模式中领有了类和实例的概念,并且实例和实例之间是互相独立的,即实例辨认。

构造函数就是一个一般的函数,创立形式和一般函数没有区别,不同的是构造函数习惯上首字母大写 。另外就是调用形式的不同,一般函数是间接调用, 而构造函数须要应用 new 关键字来调用

    function Person(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
        this.sayName = function () {alert(this.name);
        }
    }
    var per = new Person("孙悟空", 18, "男");
    function Dog(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
    }
    var dog = new Dog("旺财", 4, "雄")
    console.log(per);// 当咱们间接在页面中打印一个对象时,事件上是输入的对象的 toString()办法的返回值
    console.log(dog);

每创立一个 Person 构造函数,在 Person 构造函数中,为每一个对象都增加了一个 sayName 办法,也就是说构造函数每执行一次就会创立一个新的 sayName 办法。这样就导致了构造函数执行一次就会创立一个新的办法,执行 10000 次就会创立 10000 个新的办法,而 10000 个办法都是一摸一样的,为什么不把这个办法独自放到一个中央,并让所有的实例都能够拜访到呢? 这就须要原型(prototype)

二、原型

在 JavaScript 中,每当定义一个函数数据类型 (一般函数、类) 时候,都会天生自带一个 prototype 属性,这个属性指向函数的原型对象,并且这个属性是一个对象数据类型的值。

让咱们用一张图示意构造函数和实例原型之间的关系:

原型对象就相当于一个公共的区域,所有同一个类的实例都能够拜访到这个原型对象,咱们能够将对象中共有的内容,对立设置到原型对象中。

三、原型链

1.__proto__constructor

每一个对象数据类型 (一般的对象、实例、prototype……) 也天生自带一个属性__proto__,属性值是以后实例所属类的原型(prototype)。原型对象中有一个属性constructor, 它指向函数对象。

    function Person() {}
    var person = new Person()
    console.log(person.__proto__ === Person.prototype)//true
    console.log(Person.prototype.constructor===Person)//true
    // 顺便学习一个 ES5 的办法, 能够取得对象的原型
    console.log(Object.getPrototypeOf(person) === Person.prototype) // true

2. 何为原型链

在 JavaScript 中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在 JavaScript 中是通过 prototype 对象指向父类对象,直到指向 Object 对象为止,这样就造成了一个原型指向的链条,专业术语称之为原型链

举例说明:person → Person → Object,普通人继承人类,人类继承对象类

当咱们拜访对象的一个属性或办法时,它会先在对象本身中寻找,如果有则间接应用,如果没有则会去原型对象中寻找,如果找到则间接应用。如果没有则去原型的原型中寻找, 直到找到 Object 对象的原型,Object 对象的原型没有原型,如果在 Object 原型中仍然没有找到,则返回 undefined。

咱们能够应用对象的 hasOwnProperty() 来查看对象本身中是否含有该属性;应用 in 查看对象中是否含有某个属性时,如果对象中没有然而原型中有,也会返回 true

    function Person() {}
    Person.prototype.a = 123;
    Person.prototype.sayHello = function () {alert("hello");
    };
    var person = new Person()
    console.log(person.a)//123
    console.log(person.hasOwnProperty('a'));//false
    console.log('a'in person)//true

person 实例中没有 a 这个属性,从 person 对象中找不到 a 属性就会从 person 的原型也就是 person.__proto__,也就是 Person.prototype 中查找,很幸运地失去 a 的值为 123。那如果 person.__proto__中也没有该属性,又该如何查找?

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,始终找到最顶层 Object 为止。Object 是 JS 中所有对象数据类型的基类 (最顶层的类) 在 Object.prototype 上没有 __proto__ 这个属性。

console.log(Object.prototype.__proto__ === null) // true

退出移动版