打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

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

编程思想

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

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

举个例子: 

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

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

面向对象的特性

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

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

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

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

首先是 静态页代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Document</title>
  6. <style type="text/css">
  7. #box{
  8. width:100px;
  9. height:100px;
  10. background:red;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <button id="btn">change</button>
  16. <div id="box">
  17. </div>
  18. </body>
  19. <script type="text/javascript">
  20. </script>
  21. </html>

面向过程写法

  1. //面向过程
  2. var btnObj=document.getElementById("btn")
  3. var divObj=document.getElementById("box")
  4. btnObj.onclick=function(){
  5. divObj.style.backgroundColor="yellow"
  6. }

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

  1. //面向对象
  2. function changeStyle(btnId,divId,json){
  3. this.btn=document.getElementById(btnId);
  4. this.div=document.getElementById(divId);
  5. this.json=json;
  6. }
  7. changeStyle.prototype.init=function(){
  8. var that=this;
  9. this.btn.onclick=function(){
  10. for(key in that.json){
  11. that.div.style[key]=that.json[key]
  12. }
  13. }
  14. }
  15. var json={backgroundColor:"yellow",width:"200px"}
  16. var test=new changeStyle("btn","box",json)
  17. test.init()

创建对象的三种方式

首先 对象 是什么

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

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

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

1.字面量的方式

  1. var person1={
  2. name:"蜘蛛侠",
  3. age:20,
  4. sex:"男",
  5. eat:function(){
  6. console.log("吃面包")
  7. }
  8. }

2. 调用系统的构造函数

  1. var person2=new Object();
  2. person2.name="蝙蝠侠";
  3. person2.age=30;
  4. person2.sex="男";
  5. person2.eat=funciton(){
  6. console.log("吃肉")
  7. }

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

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

  1. function Person(){
  2. }
  3. console.log(person2 instanceof Person) //返回false
  4. console.log(person2 instanceof Object) //返回True

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

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

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

这期间做了哪些事呢

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

4.把this 对象返回

工厂模式创建对象


  1. function createObject(name,age){
  2. var obj=new Object();
  3. obj.name=name;
  4. obj.age=age;
  5. obj.sayHi=function(){
  6. console.log("您好");
  7. }
  8. return obj;
  9. }
  10. var person4=createObject("小红",40)

构造函数创建带来的问题

首先 自定义构造函数

  1. function Person(name,age,sex){
  2. this.name=name;
  3. this.age=age;
  4. this.sex=sex;
  5. this.eat=function(){
  6. console.log("今天吃拉面")
  7. }
  8. }

实例化两个对象

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

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


  1. per1.eat()
  2. per2.eat()

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


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

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

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


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

解决方法

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

首先还是自定义构造函数

  1. function Person(name,age){
  2. this.name=name;
  3. this.age=age;
  4. }

然后通过原型来添加方法

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

实例化两个对象

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

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


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

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

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


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
node.js面试题大全-侧重后端应用与对Node核心的理解
JavaScript中原型对象的彻底理解
彻底理解JavaScript原型
深入理解JavaScript,这一篇就够了 – 麦穗技术
JS 对象封装的常用方式
详解 JavaScript 中的 this
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服