专栏首页小蔚记录面向对象思想总结 新手如何理解JS面向对象开发?

面向对象思想总结 新手如何理解JS面向对象开发?

一、面向过程的思想和面向对象的思想

面向对象和面向过程的思想有着本质上的区别,作为面向对象的思维来说,当你拿到一个问题时,你分析这个问题不再是第一步先做什么,第二步再做什么,这是面向过程的思维,你应该分析这个问题里面有哪些类和对象,这是第一点,然后再分析这些类和对象应该具有哪些属性和方法。这是第二点。最后分析类和类之间具体有什么关系,这是第三点。

面向对象有一个非常重要的设计思维:合适的方法应该出现在合适的类里面。

二、简单理解面向对象

就是在程序里面首先分解出来的应该是注意不再是一步一步的过程了,而是首先考虑在这个问题域里面或者程序里面应该具有有哪些对象,所以从现在开始考虑任何问题脑子里不要再想着我实现这件事我第一步应该干什么,第二步应该干什么,如果这样想,那就是面向过程的思维了。面向对象的思维是,当我碰到这个问题域的时候,碰到这个程序的时候,我首先应该把这个问题里有哪些对象,对象与对象之间有什么关系抽象出来。

三、面向对象的设计思想

面向对象的基本思想是,从现实世界中客观存在的事物出发来构造软件系统,并在系统的构造中尽可能运用人类的自然思维方式。

面向对象更加强调运用人类在日常生活的逻辑思维中经常采用的思想方法与原则,如抽象、分类,继承、聚合、多态等。 人在思考的时候,首先眼睛里看到的是一个一个的对象。

四、对象和类的概念

对象是用于计算机语言对问题域中事物的描述,对象通过“属性(attribute)”和“方法(method)”来分别对应事物所具有的静态属性和动态属性。

类是用于描述同一类的对象的一个抽象的概念,类中定义了这一类对象所具有的静态属性和动态属性

类可以看成一类对象的模板,对象可以看成该类的一个具体实例。

新手如何理解JS面向对象开发?

今天有时间讲讲我对面向对象的理解跟看法,尽量用通俗的语言来表达,多多指教!

如今前端开发已经越来越火了,对于前端开发的要求也是越来越高了,在面试中,经常有面试官会问:你对JS面向对象熟悉吗?

其实,也就是相当于在问你,在工作中有没有用过面向对象开发?说到这里,有人就问了,什么事面向对象?

面向对象: 用我个人最简单的理解表达就是,Object的操作。另外一种理解: 给你一个条件,你去找个对象帮我处理这个事情,你就不要自己动手了。

说白了,我们就是在操作对象,那么我们就需要去创建这个对象,创建对象的方法有很多种,这里就不一一列举了,但是我们要知道,操作的所有的对象都是Object的实例,甚至还可以从原型去生成实例对象。

工作例子:

var obj = {};

obj.token = '';

obj.username = '';

obj.userid = '';

这样,一个对象搞定了。如果我们要写很多个呢?比如很多地方都用到了,是不是重复要写很多次?MMP,头都大了。

有没有办法解决呢?

那么有人就问了,为什么不做一个简单的封装呢?比如:

function obj (token,username,userid) {

  return {

    token:token,

    username:username,

    userid:userid

  }

}

然后需要的时候,调用这个obj方法传参就OK了呀?

那么问题来了,封装是没错,也能用,也有道理,那么请问,你这不是在调用函数吗?用一次调一次,他们之间有关系吗?

这时候就问了,那怎么办?有,其实也就说,有没有办法让不同的实例都指向同一个方法(函数)让他们产生关系。那么JS就给出了构造函数这个模式用来解决从原型对象去生成实例,使用了this变量,new运算符。

先不上例子,先说说为什么构造函数能解决这个问题。首先,它也是一个普通的函数,就是因为它用了this变量与new运算符使得它能够从原型对象上去new一个实例,并且JS规定每一实例都要有一个constructor属性,这个属性可厉害了,它的作用就是把每一个实例都指向同一个构造函数。也就是说,不管你生多少个儿子,爸爸就是那个构造函数。

接着看个例子:

function obj () {

    this.token:token;

    this.username:username;

    this.userid:userid;

}

var obj1 = new obj('asdfsdf82377888sdfds','john',1);

var obj2 = new obj('dfvswc89923884928k','Steph',2);

好了,例子也有了,根据上面的解释,你可以理解为obj1,obj2的爸爸都是obj,也就是都是构造函数obj的实例。

来个工作中涉及到的案例,比如上面的例子是发送一条数据到后台的,并且在前端需求中明确要求这个信息是要有时间的,也就是说这条信息是什么时候发布的也要现实出来,这时候后端程序员说:“我不处理了,你自己一起送过来吧”。那这时候,怎么处理?来来来,往下看

function obj () {

    this.token:token;

    this.username:username;

    this.userid:userid;

    this.tamp: new Date().getTime();

}

这样,O了!

问题来了,在每次生成实例的时候,this.tamp这个属性是不是都要自动生成一次?而每个实例都多出这么一个属性所占有的空间,是不是浪费资源?

解决办法: 属性prototype

先来说说概念,构造函数prototype属性,这个属性指向一个对象,而这个对象的所有的属性跟方法,都会被构造函数的实例所继承。

什么意思呢?也就是说,构造函数的这个属性里的东西都可以被它的实例继承

举例:obj构造函数定义一个prototype属性,这个属性指到一个对象,我们给这个对象加上一个属性,比如就叫tamp,那么这个属性都会被obj的实例拿到。也就解决了上面的问题。

最终可以这么写:

function obj () {

    this.token:token;

    this.username:username;

    this.userid:userid;

}

obj.prototype.tamp = new Date().getTime();

var message = new obj('sdfasdf434fasf','name',3);

var final = JSON.parse(JSON.stringify(message));

final.tamp = message.tamp;

最后将final对象传给后台搞定!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js--- 堆栈 于拷贝

    stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小不定也不会自动释放。

    小蔚
  • vue --- watch 高级用法

    上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。

    小蔚
  • react ----- 路由懒加载的几种实现方案

    符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象。这意味着模...

    小蔚
  • 【前端】:对象、原型、继承

    在 ES5 之前,JavaScript 语言本身并没有提供可以直接检测属性特性的方法,比如判断属性是否是只读。但是从 ES 开始,所有的属性都具备了属性描述符。

    WEBJ2EE
  • 什么是类?什么又是对象?

    面向对象的程序设计的核心是对象(上帝式思维),要理解对象为何物,必须把自己当成上帝,上帝眼里世间存在的万物皆为对象,不存在的也可以创造出来。

    晴天Online
  • UILabel、UIImageView和UIButton

    第一个是lineBreakMode属性,该属性设置了当文字内容大于label所能承载的内容的时候该如何展示,也就是说,当文字超长的时候如何截断。

    拉维
  • repository 与 dao的区别

    Repository是对象的仓库,也就是保存对象的地方,这个仓库就是我们普通意义的仓库,一个真正OO系统,业务层是围绕活动的对象进行,活动的对象是从仓库中获取的...

    乐事
  • Java 的对象和类 原

    Java 是一种面向对象的语言。作为一个面向的语言,Java 具有面向对象的特性,Java 能够支持下面的一些基本概念 −

    HoneyMoose
  • JS面试之对象(2)

    new的作用: 1.创了一个新对象; 2.this指向构造函数; 3.构造函数有返回,会替换new出来的对象,如果没有就是new出来的对象

    火狼1
  • 并发原子技术之CAS机制

    keithl

扫码关注云+社区

领取腾讯云代金券