原型与原型链
1-1 原型链 - 图1

  1. <script>
  2. var arr = [1,2,3];
  3. var res = arr.toString();
  4. // console.log(typeof res);
  5. console.log(arr);//[1,2,3]
  6. console.log(arr.__proto__);
  7. console.log(arr.__proto__==Array.prototype);//true
  8. console.log(arr.__proto__.__proto__);
  9. console.log(arr.__proto__.__proto__==Object.prototype);//true
  10. console.log(arr.__proto__.__proto__.__proto__);//null
  11. /* 1.在js中每一个对象都拥有一个__proto__指向其原型对象 */
  12. </script>

1.proto和constructor

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

image.png

  1. function Person() {}
  2. var person = new Person()
  3. console.log(person.__proto__ === Person.prototype)//true
  4. console.log(Person.prototype.constructor===Person)//true
  5. //顺便学习一个ES5的方法,可以获得对象的原型
  6. console.log(Object.getPrototypeOf(person) === Person.prototype) // true

2.何为原型链

在JavaScript中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链
当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型,Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined。


我们可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性;使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true

  1. function Person() {}
  2. Person.prototype.a = 123;
  3. Person.prototype.sayHello = function () {
  4. alert("hello");
  5. };
  6. var person = new Person()
  7. console.log(person.a)//123
  8. console.log(person.hasOwnProperty('a'));//false
  9. 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这个属性。
处。
image.png