js对象和原型的理解与学习（一）

你的名字 2021-12-07 12:09 158阅读 0赞

# 对象 #

（1）对象是对单个事物的抽象

（2）对象是一个容器 封装了属性（property）和方法（method）

## 1、面向对象和面向过程的概述 ##

面向对象不是新的东西，它只是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维护性。

面向对象与面向过程：

- 面向过程就是亲力亲为，事无巨细，面面俱到，步步紧跟，有条不紊

- 面向对象就是找一个对象，指挥得结果

- 面向对象将执行者转变成指挥者

- 面向对象不是面向过程的替代，而是面向过程的封装

面向对象是一种编程思想/  是一种解决问题的思想

## 2、面向对象和面向过程的对比 ##

Eg： 洗衣服

面向过程的思维方式：自己洗

面向对象的思维方式：女朋友洗

总结： 面向对象就是一种解决问题的思想,一种编程思想

## 3.面向对象的特征： ##

封装         对象是将数据与功能组合到一起, 即封装

js 对象就是 键值对的集合

- 键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性

- 如果键值是函数, 那么就称为方法

对象就是将属性与方法封装起来

方法是将过程封装起来

多态

基于强类型的, 只做了解

动物 animal = new 子类(); // 子类：麻雀、狗、猫、猪、狐狸...

动物 animal = new 狗();

animal.叫();

继承

所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西

## 4.JavaScript中的对象是什么 ##

键值对  对象中的变量称之为属性,对象中的函数称之为方法

## 5.构造函数 ##

考虑： 构造函数是做什么用的？

在JavaScript中，构造函数是给对象添加属性，初始化属性用的。

构造函数的语法结构？

function Person(name, age)\{

this.name = name;

this.age = age;

## 6.原型 继承 和原型链 ##

(1)传统构造函数存在的问题分析

实例化两个person对象,在Person对象中具备属性和方法,每创建一个对象,函数都会被重新

创建一次,这样就造成了内存的浪费. 并且呢 每个对象都拥有一个独立的 功能相同的方法

(2)将函数体放在构造函数之外. 在构造函数中只需要引用该函数即可。

这样写依然存在问题：

全局变量增多，会增加引入框架命名冲突的风险

代码结构混乱，会变得难以维护

(3)使用原型解决构造函数问题?

创建构造函数的神秘对象  使用  构造函数名称.prototype.函数名=function()\{\}

构造函数的原型对象中的成员,可以被该构造函数创建出来的所有对象访问

而且,所有的对象共享该对象

所以,我么可以将构造函数中需要创建的函数,放到原型对象中存储

这样就解决 全局变量污染的问题  以及代码结构混乱的问题

# 深度学习 #

## 1、实例化 ##

通过构造函数创建对象的过程  称之为实例化  
    实例：是指通过构造函数实例化出来的对象就是该构造函数的一个实例  
    说实例的时候 ,需要指定好 构造函数

## 2、原型相关的知识要点 ##

(1)神秘对象与构造函数  
        - 神秘对象就是构造函数的 "原型属性"  
        - 简称原型 (构造函数的原型)  
    (2)神秘对象与构造函数所创建出来的对象  
        - 神秘对象针对构造函数创建出来的对象称为 "原型对象"  
        - 简称原型 (对象的原型）  
      
    画图解释  描述他们之间的关系  
    (3)原型继承  
        - 构造函数创建的对象 继承自 构造函数的原型属性  
        - 构造函数创建的对象 继承自 该对象的原型对象  
          - 原型中的成员, 可以直接被实例对象所使用  
          - 实例对象直接 "含有" 原型中的成员  
          - 因此实例对象 继承自 原型  
          - 这样的继承就是 "原型继承"

## 3、原型的使用       ##

** 利用对象的动态属性给原型对象添加成员**  
        Eg:  
            function Person(name,age,gender)\{  
                this.name=name;  
                this.age=age;  
                this.gender=gender;  
            \}  
            Person.prototype.func=function()\{  
                console.log('somthing');  
            \}  
            var p=new Person('Mark',23,'woman');  
            p.func();  
    **直接替换原型对象**  
        Eg：  
            function Person(name,age,gender)\{  
              
                this.name=name;  
                this.age=age;  
                this.gender=gender;  
            \}  
              
            Person.prototype=\{   // 核心  
                msg:'你是我的眼'  
            \};  
            var p=new Person('张三',12,'man');  
            console.log(p.msg);  
 **  直接替换原型会出现问题**  
        Person.prototype.sayHello=function()\{  
            console.log('Nice to   meet you');  
        \}  
        var p=new Person('谢顶',23,'man');  
        p.sayHello();  
        Person.prototype=\{   // 核心 替换原型  
                msg:'你是我的眼'  
        \};  
        var p1=new Person('刘能',34,'male');  
        console.log(p1.msg);  
        p1.sayHello();// 不可以打印出结果  
        p.sayHello(); // 可以打印出结果  
          
        两次原型  并不是同一个  原型对象