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

https://blog.csdn.net/m0_37846579/article/details/80239844

编程思想

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

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

举个例子:

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

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

面向对象的特性

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

继承: 类与类之间的关系,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.onclick=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.onclick=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__向上查找方法

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。