javascript中的原型链、面向对象的理解.

青旅半醒 2023-10-10 08:23 44阅读 0赞

#### 1.什么是原型链？ ####

在javascript中大部分东西都是对象，数组也是对象，函数也是对象，对象更是对象，不管是什么它们总有一些相同的方法和属性。

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的\_\_proto\_\_隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的\_\_proto\_\_中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

原型链实现继承的主要方法是利用原型引用类型继承另一个引用类型的属性或者是方法。每一个构造函数都有一个原型对象(Person.prototype)；原型对象都包含指向构造函数的指针(constructor)；每个实例都包含指向原型对象的指针(看不见的\_proto\_指针)。某个构造函数的原型对象是另一个构造函数的实例；这个构造函数的原型对象就会有个(看不见的\_proto\_指针)指向另一个构造函数的原型对象；

给大家看一下代码就应该理解了!

<script>

let data = 0;

let c = 0

// 第一个构造函数

function SuperType() \{

data = 2;

\}

SuperType.prototype.getSuperValue = function () \{

return data

\}

//第二个构造函数;目前有一个属性

function SubType() \{

c = 1

\}

//继承了SuperType;SubType原型成了SuperType的实例;实际就是重写SubType的原型对象;给SuperType原型对象继承了

SubType.prototype = new SuperType()

//现在这个构造函数有两个属性(一个本身的subproperty,一个继承的存在原型对象的property);两个方法(一个原型对象的getSubValue,一个原型对象的原型对象的getSuperValue)

SubType.prototype.getSubValue = function () \{

return c

\}

var instance = new SubType() //创建第二个构造函数的实例

// 会往上一级一级的

console.log(instance.getSuperValue()) //2 先查找instance这个实例有没有此方法;显然没有，再查找SubType原型对象有没有此方法;也没有，再查找SubType原型对象的原型对象;显然是存在的

</script>

注意：instance的constructor现在指向的是SuperType这个构造函数；因为原来的SubType.prototype被重写了，其内部的constructor也就随着SubType.prototype的原型对象的constructor指向构造函数SuperType；

这说明一个对象所拥有的属性不仅仅是它本身拥有的属性，它还会从其他对象中继承一些属性。当js在一个对象中找不到需要的属性时，它会到这个对象的父对象上去找，以此类推，这就构成了对象的原型链.

#### 2.面向对象： ####

在javascript中面向对象是一种思想，万物皆是对象，程序中的模块都是可以看做对象，对象由属性和方法组成，面向对象会使用对象的属性和方法。

说的通俗易懂一点就是把整个需求按照特点、功能划分开，将公共的部分封装成对象，下次要用的话可以直接拿来调用，创建对象不是为了完成某一个步骤，而是描述某个事物咋解决问题的步骤行为。

举个例子吧，做一个下期的游戏：

面向过程方式思考：（大概思维）

1.红方下，

2.实现红棋子运动的情况（判断运动方式）

3.判断棋子是否吃掉对方的棋子（判断红方棋子是否能吃掉黑方棋子）

4.黑方下，

5.实现黑气棋子运动情况（判断运动方式）

6.判断棋子施工吃掉对方棋子（判断黑方棋子是否能吃掉红方棋子）

等等........

循环，最后输出结果

在上面的流程中发现有很多公共的部分，可以将他们封装通用，我们将繁琐的步骤，通过行为、功能，模块化，这就是面向对象.

面向对象的三大特征是继承、封装、多态。JS可以模拟实现继承和封装，但是无法模拟实现多态，js是基于对象的语言，而非是面向对象的语言。

##### 2.0.1面向对象的优缺点 #####

优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护  
　　缺点：性能比面向过程低

低耦合，简单的理解就是说，模块与模块之间尽可能的独立，两者之间的关系尽可能简单，尽量使其独立的完成成一些子功能，这避免了牵一发而动全身的问题，为以后的维护和更改提供了方便。

转载于:https://www.cnblogs.com/0314dxj/p/11132325.html

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript中的原型链、面向对象的理解.

1.什么是原型链？　　在javascript中大部分东西都是对象，数组也是对象，函数也是对象，对象更是对象，不管是什么它们总有一些相同的方法和属性。　　当访问一个对

青旅半醒/ 2023年10月10日 08:23/ 0 赞/ 45 阅读

相关 JavaScript中的内置对象、面向对象与原型

1、内置对象 ECMA-262 对内置对象的定义是：“由 ECMAScript 实现提供的、不依赖宿主环境的对象，这些对象在 ECMAScript 程序执行之前就已经存在

￡神魔★判官ぃ/ 2022年12月06日 12:45/ 0 赞/ 235 阅读

相关对javascript中原型链的理解

我总结的规律如下 1. 函数是一种对象，对象不一定是函数 2. 函数的构造函数为Function函数 3. 函数的prototype属性包含一个自有属性constr

清疚/ 2022年08月19日 02:00/ 0 赞/ 174 阅读

相关 JavaScript原型彻底理解2---继承中的原型链

\上一篇 [JavaScript中原型的彻底理解1][JavaScript_1] 一、继承的概念继承是所有的面向对象的语言最重要的特征之一。大部分的oop语言的都

阳光穿透心脏的1/2处/ 2022年07月15日 09:27/ 0 赞/ 233 阅读

相关 JavaScript中原型对象的彻底理解

\下一篇 [继承中的原型链的理解][Link 1] ![logo.jpg][] 一、什么是原型 > 原型是Javascript中的继承的基础，JavaScript的

谁借莪１个温暖的怀抱￠/ 2022年07月15日 09:11/ 0 赞/ 223 阅读

相关 Javascript中的原型、原型链、继承

原型链和基于原型链的继承原型要了解原型链，我们得先来了解原型每个函数（构造）被创建时，系统会自动为这个构造函数创建并关联一个空的对象，这个空的对象就是

落日映苍穹つ/ 2022年06月15日 02:07/ 0 赞/ 336 阅读

相关 JavaScript中的原型与原型链

1、原型　　JavaScript中的所有数据都可以看成对象，那是不是我们已经在使用面向对象编程了呢？　　当然不是。如果我们只使用Number、Array、stri

超、凢脫俗/ 2022年06月13日 02:56/ 0 赞/ 279 阅读

相关 JavaScript面向对象与原型

构造函数虽然不错，但有的时候我们需要对属性和方法进行修改，做过vue项目的应该都遇到过这种情况，我们需要声明一些全局变量，我们一般这么做 import axios f

绝地灬酷狼/ 2022年04月01日 04:46/ 0 赞/ 290 阅读

相关 JAVASCRIPT面向对象的程序设计之原型链继承

原型链继承继承是OO(Object oriented 面向对象)语言中的一个最为津津乐道的概念。许多面向对象语言都支持两种继承方式：接口继承和实现继承。接口继承只继承

梦里梦外;/ 2022年03月17日 10:24/ 0 赞/ 313 阅读

相关 JavaScript 原型对象、原型链继承简单理解，使用

![在这里插入图片描述][70] 非常简单的直接用代码说一下个人对原型对象的理解 <!DOCTYPE html> <html lang="en">

た入场券/ 2022年02月20日 09:38/ 0 赞/ 340 阅读