JavaScript对象、面向对象思想

woniu_li

于 2020-09-16 10:21:27 发布

阅读量131

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/woniu_li/article/details/108615908

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是面向对象

面向对象仅仅是一个概念或者编程思想。
JS通过一种叫做原型的方式来实现面向对象编程。

对象

对象属于一种复合的数据类型，在对象中可以存放多个不同数据类型的属性。
对象的分类

内建对象：由ES标准中定义的对象，在任何的ES的实现中都可以使用。比如：Math、String等。
宿主对象：由JS的运行环境提供的对象，目前来讲主要是浏览器提供的对象。比如：BOM、DOM
自定义对象：由开发人员自己定义的对象。

基本数据类型和引用类型存储的位置

基本数据类型：

JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储。
值与值之间是独立存在，修改一个变量不会影响其他的变量。

引用数据类型：

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间。
而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用。当一个通过一个变量修改属性时，另一个也会受到影响。

基于Object对象的方式创建对象

语法：var 对象名 = new Object()；
添加属性和方法：对象名 . 属性|方法；
示例：

var o = new Object();
        o.name = "张三";
        o.age = 14;
        o.eat = function () {
            alert("这是吃的方法");
        }
        // 调用方法
        o.eat();

使用对象字面量的方式创建对象

语法：{属性名：属性值，属性名：属性值 …}
对象字面量的属性名可以加引号也可以不加，建议不加，如果是一些特殊的名字，则必须加。
属性名和属性值是一组一组的名值对结果，类似JAVA中Map
属性名和属性值之间使用：号连接，多个名值对之间用英文逗号分隔。
示例：

var person1 = {
            name:"张三",
            age:13,
            // 定义函数
            eat:function(){
                var str = "姓名："+person1.name+"\n年龄：" + person1.age;
                alert(str);
            }
        }
        // 通过对象调用函数
        person1.eat();

内置对象

RegExp对象
RegExp是正则表达式的缩写
Boolean（逻辑）对象
true或者false
toString( )方法

对象【工厂方式】

使用工厂方法创建对象
通过该方法可以大批量的创建对象
示例：

// 使用工厂方式创建对象
        function factory(name , age) {
            // 创建对象
            var o = new Object();
            // 添加属性和方法
            o.name = name;
            o.age = age;
            o.eat = function () {
                alert(this.name);
            };
            // 返回对象
            return o;
        }
        var o1 = factory("张三" , 33);
        var o2 = factory("李四" , 23);

使用工厂创建的对象，使用的构造函数都是Object，所以创建的对象都是Object类型，就倒置我们无法区分不同类型的对象。

构造函数

创建特定类型的对象
this变量
new操作符
示例：

// 构造函数。构造函数名始终都应该以一个大写字母开头
        function Animal(name , age) {
            this.name = name;
            this.age = age;
            this.call = function () {
                alert(this.name + "叫");
            }
        }
        // 同过构造函数创建对象
        var dog = new Animal("旺财" , 3);
        dog.call();

对象【构造函数就是一个普通的函数，创建方式和普通的函数没有区别，不同的是构造函数习惯首字母大写】
构造函数和普通函数的区别是调用的方式不同，普通函数直接使用，而构造函数要使用new关键字来调用。

构造函数的执行流程

创建一个对象
将新创建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象。
逐行来执行函数中的代码
将新建的对象作为返回值返回

使用同一个构造函数创建的对象我们称之为一类对象，也将一个构造函数称为一个类，通过一个构造函数创建的对象，称为该类的实例。

this的情况

当以函数的形式调用时，this时window
当以方法的形式调用时，谁调用方法this就是谁
当以构造函数的形式调用时，this就是新创建的那个对象

对象【构造函数 + 原型】

上边我们通过构造函数创建对象，每创建一个对象就会创建一个相同的方法，这是完全没有必要的，我们可以令多个对象使用同一个方法。
原型：

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype这个属性对应着一个对象，这个对象就是我们所谓的原型对象。
如果函数作为普通函数调用prototype没有任何作用。
当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性。
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用，以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

函数的prototype属性

每个函数都有一个prototype属性，他默认指向一个空的Object对象。即称原型对象。
原型对象中有一个constructor，他指向函数对象。

给原型对象添加属性（一般都是方法）

作用：函数的所有实例对象自动拥有原型中的属性（方法）。

显示原型和隐式原型

每个函数都有一个prototype，即显示原型。
每个实例对象都有一个_proto_，可称为隐式原型。
对象隐式原型的值为其对应构造函数的显示原型的值。
总结：

函数的prototype属性：在定义函数时自动添加，默认指向空Object对象。
对象的_proto_属性：创建对象时自动添加，默认为构造函数的prototype属性值。
程序员可以直接操作显示原型，但不能直接操作隐式原型（ES6之前）。
示例：

function Persons() {}
        Persons.prototype.name = "魅语";
        Persons.prototype.age = 20;
        Persons.prototype.eac = function (name) {
            alert(name + "在吃饭。。。。。。")
        };
        var p1 = new Persons();
        p1.eac("紫霞");

原型链

一个原型对象是另一个原型对象的实例。
相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链。

示例：

function Humans(){
            this.foot=2;
        }
        Humans.prototype.getFoot=function(){
            return this.foot;
        }
        function Man(){
            this.head=1;
        }
        Man.prototype=new Humans();          //继承了Humans
        Man.prototype.getHead=function(){
            return this.head;
        }
        var man1=new Man();
        alert(man1.getFoot());               //2
        alert(man1 instanceof Object);       //true
        alert(man1 instanceof Humans);       //true
        alert(man1 instanceof Man);          //true