JS学习笔记什么是面向对象、创建对象的几种方法、利用原型节省内存空间

最新推荐文章于 2021-09-04 18:12:11 发布

倪晓磊

最新推荐文章于 2021-09-04 18:12:11 发布

阅读量314

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/m0_37846579/article/details/80239844

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

编程思想

面向过程:所有事情都是亲力亲为，注重的是过程

面向对象:提出需求，找对象，对象解决，注重的是结果

举个例子:

面向过程: 比如你想吃面条，面向过程就是自己去买面粉，然后买来自己和面，自己煮面，所有的过程都是得自己一步一步去做

面向对象: 我想吃面，在附近找一家面馆，跟老板说要吃什么面，你只需要给老板钱，就会给你煮好的面，你本身不需要关心任何过程

面向对象的特性

封装: 将一些可能会重复使用到的内容进行包装，在要用到时，可以直接拿过来用

继承: 类与类之间的关系,js 中可以基于原型实现继承

多态:同一个行为，针对不同的对象，产生不同的效果，比如，你对不同的人说不同的话

我们实践一下，比如我们要编写通过按钮改变div背景的代码

首先是静态页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #box{
            width:100px;
            height:100px;
            background:red;
        }
    </style>
</head>
<body>
    <button id="btn">change</button>
    <div id="box">

    </div>
</body>
<script type="text/javascript">

</script>
</html>

面向过程写法

//面向过程
var btnObj=document.getElementById("btn")
var divObj=document.getElementById("box")
btnObj.οnclick=function(){
    divObj.style.backgroundColor="yellow"
}

然后再看看面向对象，可以轻松一次操作多个属性

//面向对象
function changeStyle(btnId,divId,json){
    this.btn=document.getElementById(btnId);
    this.div=document.getElementById(divId);
    this.json=json;
}

changeStyle.prototype.init=function(){
    var that=this;
    this.btn.οnclick=function(){
        for(key in that.json){
            that.div.style[key]=that.json[key]
        }
    }
}
var json={backgroundColor:"yellow",width:"200px"}
var test=new changeStyle("btn","box",json)
test.init()

创建对象的三种方式

首先对象是什么

特指的某个事物，具有属性和方法(一组无需的属性的集合) 比如人

其特征为属性，比如，身高，体重

其行为是方法比如吃饭，睡觉，敲代码

1.字面量的方式

var person1={
        name:"蜘蛛侠",
        age:20,
        sex:"男",
        eat:function(){
            console.log("吃面包")
        }
     }

2. 调用系统的构造函数

var person2=new Object();
person2.name="蝙蝠侠";
person2.age=30;
person2.sex="男";
person2.eat=funciton(){
    console.log("吃肉")
}

以上这两种方式，创建出来的对象无法确定到底是什么类型的,如下

蜘蛛侠和蝙蝠下应该都属于人类，但这里无法确定

function Person(){

}

console.log(person2 instanceof Person)   //返回false
console.log(person2 instanceof Object)  //返回True

3. 自定义构造函数方式--->函数名是大写(首字母)

使用这种方式创建出来的 "钢铁侠" 属于人类范畴

function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.eat=function(){
        console.log("吃米饭")
    }
}
//创建对象 也叫 实例化一个对象，的同时对属性进行初始化  对象是由构造函数创建的
var person3=new Person("钢铁侠",25,"男")
console.log(person3 instanceof Person)//返回true

这期间做了哪些事呢

1.开辟空间存储对象
2.把this 设置为当前的对象
3.设置属性和方法的值

4.把this 对象返回

工厂模式创建对象

function createObject(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.sayHi=function(){
        console.log("您好");
    }
    return obj;
}

var person4=createObject("小红",40)

构造函数创建带来的问题

首先自定义构造函数

function Person(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.eat=function(){
            console.log("今天吃拉面")
        }
      }

实例化两个对象

var per1=new Person("小红",20,"男")
var per2=new Person("小强",23,"男")

两个方法都可以调用,并且输出结果是一样的

per1.eat()
per2.eat()

但是其实这是两个方法你会发现这两个方法并不相等

console.log(per1.eat==per2.eat)

当遇到这种情况,问题就变严重了,会产生100个不一样的eat方法

因为每次实例化的指向都不相同每次都会进行开辟空间,这样的做法就会浪费内存

for(var i=0;i<100;i++){
        var per=new Person("小明",18,"男")
        per.eat()
      }

解决方法

通过原型来解决-------数据共享，节省内存空间

首先还是自定义构造函数

 function Person(name,age){
            this.name=name;
            this.age=age;
     }

然后通过原型来添加方法

Person.prototype.eat=funciton(){
        console.log("我要吃黄焖鸡")
     }

实例化两个对象

 var p1=new Person("小红",20)
 var p2=new Person("小明",20)

此时两个实例对象的eat方法相等了，就算实例化100个对象,也只开了一个空间

console.log(p1.eat==p2.eat)

然后查看一下是否有这个方法

并不存在"小红"这个对象上,但是存在于原型上，当你调用这个方法的时候，他会通过__propto__向上查找方法

想了解原型链请跳转至原型链笔记--->

倪晓磊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习笔记什么是面向对象、创建对象的几种方法、利用原型节省内存空间

编程思想面向过程:所有事情都是亲力亲为，注重的是过程面向对象:提出需求，找对象，对象解决，注重的是结果举个例子: 面向过程: 比如你想吃面条，面向过程就是自己去买面粉，然后买来自己和面，自己煮面，所有的过程都是得自己一步一步去做面向对象: 我想吃面，在附近找一家面馆，跟老板说要吃什么面，你只需要给老板钱，就会给你煮好的面，你本身不需要关心任何过程面向对象的特性封装: 将一些可能会重复使用到...
复制链接

扫一扫