图文解说 Javascript中 原型和原型链 构造函数 组合使用方法

开发 前端
所有函数对象除了有proto属性之外还有prototype属性。因为函数也是对象,所以有proto,但同时函数这一对象类型比较特殊,所以还有prototype。

原型和原型链

原型和原型链是前端比较重要的概念,也比较绕,很多人都搞不明白。刚好今天有人问我索性就写篇文章整理一下。

首先来说一下什么是原型、原型链和构造函数。

原型:JS中的对象都包含了一个prototype的内部属性,这个属性所对应的就是该对象的原型。

原型链:原型链是是有一些用来继承和共享属性的对象组成的对象链。并且原型链的长度是有限的。

构造函数:原型对象包含一个constructor属性,对应创建所有指向该原型的实例的构造函数。

function Super(){};
function Middle(){};
function Sub(){};
Middle.prototype = new Super();
Sub.prototype = new Middle();
var suber = new Sub();

接下来说一下 prototype 和 proto

所有对象都有proto属性指向该对象的原型。

所有函数对象除了有proto属性之外还有prototype属性。因为函数也是对象,所以有proto,但同时函数这一对象类型比较特殊,所以还有prototype。

一、构造函数

构造函数其实就是一个普通函数,只是我们为了区分普通函数,通常建议构造函数name首字母大写;

function Foo(){

}

构造函数调用:

function Foo(){
console.log(1) // 1
}
Foo(); // 1

二、原型

JavaScript中数据类型分类基本数据类型与引用数据类型

  • 基本数据类型:Number,String,Boolean,Undefined,Null,Symbol。
  • 引用数据类型:Object,Function,Date,Array,RegExp等。

基本类型中除了undefined与null之外,任意数字,字符,布尔以及symbol值都有__proto__属性,以字符串为例,我们打印它的__ptoto__并展开

所有的对象都有__ptoto__属性,而字符串居然也有__proto__属性,__proto__是一个访问器属性,它指向创建它的构造函数的原型prototype。还记得前面做杯子的构造函数吗?每实例个杯子其实只有直径与高度属性,但通过实例的__proto__属性我们找到了构造函数CupCustom的原型prototype,从而成功访问了prototype上的color属性。

function Person(){}
// 为原型对象添加方法
Person.prototype.sayName = function(){ alert(this.name);}

prototype:是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。

__proto__:是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性。

function Foo(){

}
Foo.prototype.myName = "你好" // 原型
const foo = new Foo();
foo.__proto__ // 原型链接

prototype 属性就被自动创建了

从上面这张图可以发现,Foo 对象有一个原型对象 Foo.prototype,其上有两个属性,分别是 constructor 和 __proto__,其中 __proto__ 已被弃用。

构造函数 Foo 有一个指向原型的指针,原型 Foo.prototype 有一个指向构造函数的指针 Foo.prototype.constructor,这就是一个循环引用,即:

Foo.prototype.constructor === Foo; // true

三、原型链

当我们在浏览器中打印 obj 时你会发现,在 obj 上居然还有一个 __proto__ 属性,那么看来之前的疑问就和这个属性有关系了。

其实每个 JS 对象都有 __proto__ 属性,这个属性指向了原型。这个属性在现在来说已经不推荐直接去使用它了,这只是浏览器在早期为了让我们访问到内部属性 [[prototype]] 来实现的一个东西。

  • Object 是所有对象的爸爸,所有对象都可以通过 __proto__ 找到它。
  • Function 是所有函数的爸爸,所有函数都可以通过 __proto__ 找到它。
  • 函数的 prototype 是一个对象。
  • 对象的 __proto__ 属性指向原型,__proto__ 将对象和原型连接起来组成了原型链。

看完这张图,我再来解释下什么是原型链吧。其实原型链就是多个对象通过 __proto__ 的方式连接了起来。为什么 xialuo 可以访问到 sayHi 函数,还能访问eat函数,最后toString等等,就是因为 xialuo 通过原型链__proto__找到了 toString 等函数。

责任编辑:武晓燕 来源: 今日头条
相关推荐

2020-02-20 14:00:15

JavaScript原型原型链

2020-10-20 08:35:34

JS基础进阶

2011-08-24 13:56:27

JavaScript

2012-11-08 10:40:47

JavaScript原型链

2023-08-28 07:12:54

2012-01-05 15:07:11

JavaScript

2017-04-07 11:15:49

原型链原型Javascript

2016-06-07 14:28:39

Javascript原型

2022-05-26 09:20:01

JavaScript原型原型链

2020-09-10 07:04:30

JSJavaScript 原型链

2022-05-26 23:14:26

原型原型链JS继承

2017-05-05 10:31:35

JavaScriptprototype__proto__

2024-08-09 12:44:45

JavaScript原型链链条

2016-05-06 14:02:18

JavaScript原型链

2016-12-27 09:10:29

JavaScript原型链继承

2011-08-31 14:48:33

JavaScript

2019-02-27 16:00:48

JS原型原型链对象

2020-04-29 14:40:19

JavaScript继承编程语言

2023-12-07 07:41:15

JavaScript函数原型

2024-07-11 14:05:28

JavaScript函数
点赞
收藏

51CTO技术栈公众号