JavaScript中的原型保姆级文章一文搞懂

本文链接：https://blog.csdn.net/m0_57301042/article/details/139976089

JavaScript中的原型一文搞懂

🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

1.前言

在js中所有东西都可以当成一个对象,但是因为js不是一门完全的面向对象的语言,于是js作者想出了使用原型这种方式来实现继承.

2.构造函数

在js中可以通过构造函数来实现面向对象中的Class(类).

function Person(name,age){
    this.name = name;
    this.age = age;
}

const a = new Person("雨溪",18); // a变量就是Person的实例对象;

ES6中的class可以看作只是一个语法糖，它的绝大部分的功能，ES5都可以做到，新的class写法只是让原型的写法更加的清晰、更像面向对象编程的语法而已。

3.原型

此时访问a.getName()就是访问的Person的原型对象的getName方法,因为当我们调用对象的方法时,js会顺着原型链一直一直上去找,那我们的a与Person对象又有什么关系呢?

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function () {
    return this.name;
};

const a = new Person("雨溪",18);
console.log(a.getName())

当我们在js中访问一个对象上的属性的时候js会一层一层往上面找如果该对象没有该属性则会到该对象的构造函数的原型对象上找.

变量a的构造函数就是Person,而Person的原型对象上就有getName方法,所以当我们调用a.getName()时,js就会一直往上面找,找到了Person的原型对象上,所以代码才会正常运行.
在这里插入图片描述

4.proto

每个对象身上都会有proto这个属性,它指向这个对象的构造函数的原型.

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function(){
    return "雨溪"
}

const a = new Person("雨溪",18); // a变量就是Person的实例对象;
console.log(a.__proto__) // {getName()}

构造函数或者函数的**proto**属性指向Function的原型,并且js中所有对象的顶层都是大Object.

function Person(name,age){
    this.name = name;
    this.age = age;
}

const a = new Person("雨溪",18); 
console.log(a.__proto__) // Person.prototype
console.log(Person.__proto__) // Function.prototype
console.log(Person.__proto__.__proto__) // Object.prototype
console.log(Person.__proto__.__proto__.__proto__) // null

5.constructor

同理,每个对象都有它自己的构造函数,constructor属性就是指向对象的构造函数的.

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function(){
    return "雨溪"
}

const a = new Person("雨溪",18); // a变量就是Person的实例对象;
console.log(a.constructor) // Person