【JavaScript25】关于prototype

发布时间 2023-08-08 21:30:33作者: Tony_xiao

老版本的js中是没有类的概念的.js如何构建一个对象的呢?

  • 在js中, 每一个函数都可以作为构建一个对象的构造方法
  • 函数又可以被称为 构造函数 constructor 构造器, 构造方法
function Person(name, age){
    // 给当前对象(内存)进行初始化
    this.name = name;
    this.age = age;
    // 这里有隐藏的一句话. return this
    console.log(this);
}
// new表示创建 -> new就是在开辟一个新内存.
// 需要初始化该对象 ,  new后面的函数表示如何初始化这个新内存
var p1 = new Person("xwl", 19);
console.log(p1);

类呢? 方法怎么办?

  • 在前端, es6之前. 就没有类. 方法的编写有两个办法
  • 1、可以在对象初始化的时候. 直接在对象身上写方法
  • 2、所有的函数在创建的时候. 都会自动创建一个函数的原型对象.原型对象充当了类的角色,在类中添加一个新的方法
//1、可以在对象初始化的时候. 直接在对象身上写方法
 function Person(name){
    this.name = name;
    this.eat = function(){  // 直接在对象身上植入方法.
        console.log(this.name, "在吃东西");
    }
}

var p1 = new Person("xwl");
p1.eat(); // 方法的调用

//2、原型对象充当了类的角色,添加方法
function Person(name){
    this.name = name;
}

// 程序执行到这里. 在内存中. 会产生两个东西
// 一个是函数本身(constructor)
// 一个是函数对应的原型对象(prototype), 充当的就是类的角色
// console.log(Person);
// console.log(Person.prototype);

// 在类中添加一个新的方法. 叫eat
Person.prototype.eat = function(){
    console.log(this.name, "在吃东西");
};

var p1 = new Person("xwl"); // 会调用Person函数
p1.eat();

总结

// 在对原型没有任何操作之前.
// Person === Person.prototype.constructor 成立的.
// Person.prototype === p1.__proto__ 成立的.
// p1.__proto__.__proto__.__proto__ === null 成立的.

// js中所有的对象. 身上有一个特殊的属性. __proto__ 它表示该对象的原型对象.

// 程序在执行p1.eat()的时候.
// 不论是执行方法还是查找属性. 都是同一个逻辑.
// 执行过程:
// 首先, 在对象自身去查找该方法/属性是否存在.
// 如果存在了, 就直接返回或执行了.
// 如果不存在呢?
// 就会去找该对象的原型对象(__proto__), 去找该方法是否存在. 如果存在. 就执行
// 原型对象上如果不存在呢? 继续查找原型对象的原型对象(__proto__). 持续查找. 直到最后找到null为止.

// 上述逻辑就是js的原型链.