乐趣区

关于javascript:js原型与原型链

jiezi

原型与原型链

相干属性

  1. prototype
  2. __proto__
  3. constructor

1.prototype

所有者: 所有 函数 都有此属性
指向：构造函数所创立实例对象的原型 对象
能够了解为一个 节点，结构器实例化的对象能够在原型对象上继承属性与办法

function Student(name) {this.name = name}
let std1 = new Student("张三")
Student.prototype.getName = function () {console.log(this.name);
}
std1.getName()// 张三

2.__proto__

所有者：所有 对象 都有的属性
指向：该对象的原型对象
能够了解为一个 指针, 指向该对象的原型对象

function Student() {}
let std1 = new Student()
Student.prototype == std1.__proto__

3.constructor

所有者：原型对象
指向：实例对象的构造函数
此属性实例对象能够继承

function Student() {}
let std1 = new Student()
std1.__proto__.constructor == Student //true
std1.constructor == Student //true
Student.prototype.constructor == Student //true

4. 原型链

由 1、2 能够晓得，实例化对象的__proto__指向构造函数的 prototype，原型对象也有__proto__属性，指向一个原型对象
那么能够将由 __proto__连贯 的原型对象看作一个 原型链
因而能够取得以下关系图

  • 原型对象是通过 Object 构造函数生成的
  • 红色的线就是原型链
// 学校的构造函数
function School(name, age) {
    this.name = name
    this.age = age
}
School.prototype.getName = function () {console.log(this.name);

}
School.prototype.getAge = function () {console.log(this.age);
}
// 实例化一个学校
let sch1 = new School("理工", 100)
// 学生的构造函数
function Student(name, age) {
    this.name = name
    this.age = age
}
// 实例化一个学生
let std1 = new Student("张三", 18)
// 扭转一个学生的原型指向
std1.__proto__ = sch1
std1.getName() // 张三
console.log(std1.hasOwnProperty("getName"));//false
console.log("getName" in std1);//true
  • std1 上并没有 getName 办法，hasOwnProperty 返回 false
  • 应用 in 操作符能够看出 getName 在原型链上，是 std1 继承来的办法
  • std1.__proto__ -> sch1.__proto__ -> School.prototype

5.Function 与 Object 的特殊性

Fuction 本人结构了本人

function Student() {}
  • 在创立一个函数时相当于上面代码
let Student = new Function()
  • 那么这个函数能够看做一个实例化的对象，也有__proto__属性，Function 是构造函数
function Student() {}
Student.__proto__ === Function.prototype //true
  • Function 是一个函数应该也有一个构造函数，并且这个构造函数就是它本身
Function.__proto__ === Function.prototype

Object 是由 Function 结构而来

let obj = {}
let obj = new Object()
  • 字面量模式创立一个对象就相当于用 new 实例化一个 Object
  • Object 就是一个构造函数，函数是不是应该是由 new 实例化的 Function，Object 是 Function 的实例化对象，则有__proto__属性
Object.__proto__ === Function.prototype //true
Object.__proto__ === Function.__proto__ //true
  • 因为 Function 作为构造函数是由本身结构而来，Function 的__proto__与 prototype 雷同
  • Object 作为构造函数是由 Function 结构而来，看成一个实例化的对象，那么 Object 的__proto__指向 Function 的 prototype
  • 最初能够失去 Object.__proto__ === Fuction.__proto__
  • 那么其余内置对象是不是也有同样的个性呢？

总结

了解原型与原型链，次要还是分清 谁有什么属性 ，也就是 prototype、__proto__、constructor 从属于谁，函数？对象？原型？它们别离又代表什么
第 5 点只是辅助了解，两头也在强调它 是什么 性会有什么 属性

退出移动版