js面向对象（对象/类/工厂模式/构造函数/公有和原型）

喜欢ヅ旅行 2023-06-05 08:11 20阅读 0赞

## [https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan] ##

## 什么是对象 ##

js中一切都是对象（有行为和特征）。js允许自定义对象，也提供了内建对象（string date math等）

对象拥有属性和方法。属性是本身的特征，如 车的颜色，型号。 方法是可执行的操作。如，车可以代步

如数组length是属性，pop push是方法

（直接调用的是函数，通过对象调用的是方法）

对象的作用：封装一些信息

面向对象:可以创建自定义的类型，很好的支持继承和多态c++ ，java等

基于对象：不可以创建自定义的类型，不能很好的支持继承和多态 。 js

没有对象，new一个

var peopele = new Object();
            // 属性
            people.name = 'jack';
            peolpe.age = 20;
            people.gender = 'male';
            // 方法（行为）
            people.move = function(){
                console.log('I can walk');
            };

## 对象的重要性 ##

只有当一个函数和变量存在于同一对象中时，他们之间可以相互访问，我们认为他们存在于同一个上下文环境中。

只有存在于同一上下文环境中变量可以互相访问，代码才得以执行。

当一个html文件运行在浏览器中时，浏览器会为这个html文件的js环境自动添加一个window对象，对引入到这个html中的所有js文件进行预解析，

将js中所有全局变量和函数绑定为window对象的属性和行为。

window对象时一个html文件脚本代码执行的根上下文环境。

一个对象会形成一个单独的上下文环境

堆里面存的是对象，方法区存代码字节，栈区执行代码。

页面运行时，会在堆上开辟一块空间存放当前文件的环境,并把页面所有全局变量和函数绑定给对象，初始值为undefined（预解析时检索函数和全局变量绑定给window对象），方法区存放代码块

函数执行时在栈临时开辟一块空间，找到需要函数/变量所在上下文环境，在同一上下文环境获取值，调用结束出栈，释放内存

函数执行时，局部变量可以在函数内访问到。函数未调用或调用结束，出栈后销毁当前执行环境，全局位置无法访问局部变量。

所有浏览器都支持 window 对象。表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

## js提供的对象和类 ##

举个栗子

var _body = document.getElementsByTagName('body')[0];
        Math.random();

document, Math等都是window对象的子对象

只有对象有资格以点的方式调用数据，这些方法必须加上所属的对象才能调用

## 类的概念 ##

JavaScript 基于 prototype，而不是基于类的。

js中没有类的概念 通过封装函数实现类的概念，通过this对象实现从类中演化对象的动作

类是一个抽象的概念，是属性（变量）和行为（方法）相似的一类事物的统称。

在代码中，拥有的变量和操作相似的数据，称之为一个类，例如所有的数组有length，可pop，push等

类中单独的一个个体称为对象，从一个类中演化出的某个对象，拥有这个类共同的属性和行为

类的三大特点 封装 继承 多态

js不是面向对象的语言，是基于对象的语言。因为js由对象产生代码执行的上下文环境。

## js工厂模式 ##

// 通过工厂方式实现类和对象的概念
            function createBox(x,y,wh,c){
                var obj = {
                    x: 40,
                    y: 30,
                    wh :15,
                    c: 'rgba(4,5,6,.8)',
                    move: function(){},
                    hit: function(){}
                };
                return obj;
            }
            var box1 = createBox(20,3,4,'#f00');
            box1.move();
            var box2 = createBox(2,30,4,'#0f0');
            box2.move();

在编程过程中，有一些数据具有相同的属性和行为（相同变量值不同，相同方法等）。

如果使用面向过程的编程方式，（将每一个值具体的编写出来）会产生大量代码和内存冗余。

我们可以将产生对象的过程封装成一个函数，就不用重复编写产生对象的过程，只需调用函数并拿到返回值

这样的方法称为工厂方法，工厂方法是js面向对象的主要编程方法之一（jq用这种方法）

## 构造函数 ##

// 构造函数+this
        // 声明box类
        function Box(x,y,bg,wh){
            this.x= x;
            this.y=y;
            this.bg=bg;
            this.wh=wh;
            this.move = function(){},
            this.hit = function(){};
        }
        // 从类中实例化一个对象
        var bl = new Box(3,4,'#f00',45);
        console.log(bl);

构造函数是js实现类的具体方式

new关键词实现了从类中实例化对象的动作。

new关键词调用函数的步骤

1. 将函数内部this变成给一个空对象

2. 执行代码（给this绑定各种键值对）

3. 返回this

this出现在函数内部时

1. 当函数绑定给事件时，this指向这个事件驱动的DOM节点

2. 函数出现在某个对象中，函数中this指向这个函数所在上下文环境（函数所属对象）

3. 构造函数中this是一个临时对象，指向每次实例化的对象本身

## 公有和原型 ##

在构造函数中使用this为对象添加的属性和行为成为共有属性和公有方法，会随着对象的实例化存储在对象所在内存空间中，

声明了多少对象就有多少相对应的键值对，会出现大量存储空间的冗余。（从类中是实例化的对象可能拥有相同的共有方法代码快）

Box.prototype.move = function(){
            console.log('moving');
        }
        Box.prototype.hit = function(){
            console.log('hitting');
        }
        var b = new Box(3,4,'#f00',12);
        console.log(b);
        b.move();

我们可以为类的构造函数添加一个prototype属性，然后在该属性上绑定所有对象都有的相同的行为（代码块）。

我们把绑定在构造方法prototype上的属性和行为称为对象的原型属性和原型方法。

原型的方法和属性只声明一次不断被对象调用，大大节省了内存，解决了公有方法引起的内存冗余。

类中所有对象都有，但值不同的属性和行为声明为共有的，所有对象都有且值相同声明为原型的。

// 声明一个类
            function People(name,sex,age){
             // 共有属性
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            People.prototype = {
                eat: function(){
                    console.log('eat');
                },
                run: function(){
                    console.log('run');
                }
            }
            People.prototype.talk = function(){
                console.log('talk');
            }
            var pl = new People('tom','女',18);
            
            pl.eat();
            pl.run();
            pl.talk();
    　　　　//都可以调用，顺序换了 talk就不能调用

一般使用第二种的添加方式（两种混合，这种会覆盖另一种）

类的prototype其实是类的构造函数的一个键，其数据类型是一个对象，存储了这个类的所有对象共有的相同的属性和行为

## 类的私有方法和属性 ##

function People(name){
              var h = 0.1; //私有属性
              var getMoney = function(){};//私有方法
              this.name = name;
          }

类的私有属性和私有方法其实是类的构造函数内部的局部变量和函数，出了这个类的构造函数，无法访问其内部局部变量和函数

## 类的方法和属性的互相访问 ##

function Box(x,y){
        this.el = document.createElement('div');
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
    }
    Box.prototype.move = function(){
        // 让小球实现碰壁反弹
        this.x += this.vx;
        this.y += this.vy;
        this.el.style.top = this.x + 'px';
        this.el.style.left = this.y + 'px';
    };

? 碰壁反弹局部代码

在类的公有方法和原型方法中，this可访问类的其他方法和属性，除了私有

类的公有方法和原型方法中的this总是指向当前调用该方法的对象本身

（我好难啊）

转载于:https://www.cnblogs.com/sandraryan/p/11531926.html

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/