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

6.原型链

前面说了,在js中当我们调用对象的方法或者属性时会一层一层往上找,直到找到Object的原型对象,再往上就没有了.

下面一个图带大家理解一下原型链

原型链的作用就是可以让js实现面向对象的继承机制,子类可以通过原型链访问到父亲的原型上的属性.

7.总结

其实大家如果学过面向对象的编程语言的话,理解这个其实很简单,js只是使用了另一种方式来实现了继承.关键就是通过原型链查找或者复制父亲的原型方法和属性以达到继承的效果.

Hi👋,这里是瑞雨溪->一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我->我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉