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

如今前端开发已经越来越火了,对于前端开发的要求也是越来越高了,在面试中,经常有面试官会问:你对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对象传给后台搞定!

新手如何理解JS面向对象开发?的更多相关文章

  1. 全面理解js面向对象

    前言 当今 JavaScript 大行其道,各种应用对其依赖日深.web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学 ...

  2. js面向对象开发基础

    js的面向对象开发能力较弱,基本是以prototype为核心的面向对象,虽然现在出了个class这玩意,但本文还是先不做探讨. 面向对象基础——构造函数方法 var Fly = function (s ...

  3. 悟透JavaScript(理解JS面向对象的好文章)

    引子 编程世界里只存在两种基本元素,一个是数据,一个是代码.编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力. 数据天生就是文静的,总想保持自己固有的本色:而代码却天生活泼,总想改变这个 ...

  4. 原生js日历选择器,学习js面向对象开发日历插件

    在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...

  5. JS面向对象使用面向对象进行开发

      面向对象基础一之初体验使用面向对象进行开发 对 JS 中的面向对象的基础进行讲述, 初体验使用面向对象进行开发 主要内容是 面向对象的概念及特性 用面向对象的方式解决简单的标签创建实例 一些基础的 ...

  6. js面向对象理解

    js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是, ...

  7. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  8. js原型和原型链理解到面向对象

    一.js中的两种对象,普通对象和函数对象 var obj1 = {}; var obj2 =new Object(); var obj3 = new obj1(); function fun1(){} ...

  9. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

随机推荐

  1. 类别不平衡问题和Softmax回归

    目录 类别不平衡(class-imbalance) Softmax回归模型 类别不平衡(class-imbalance) 当不同类别的训练样本数目差别很大,则会对学习过程造成困扰.如有998个反例,但 ...

  2. SpringBoot整合RabbitMQ-消息可靠性投递

    本系列是学习SpringBoot整合RabbitMQ的练手,包含服务安装,RabbitMQ整合SpringBoot2.x,消息可靠性投递实现等三篇博客. 学习路径:https://www.imooc. ...

  3. Elastic Stack初篇-Logstash

     一.Logstash简介      Logstash是一个开源数据收集引擎,具有实时管道功能.Logstash可以动态地将来自不同数据源的数据统一起来,并将数据标准化到你所选择的目的地. 二.Log ...

  4. Oracle通过Navicat导入表数据与机构,数据无法直接查询,需要加双引号的问题

    使用navicat 导入表到ORACLE时,总是会遇到虽然表格完整导入到数据库,但是往往查不出来数据,网上提供的解决办法是把查询的列 加上 双引号,或者表名加上双引号,但这解决办法却减慢了编写sql ...

  5. Bean的自动装配

    再说自动装配之前,我们先聊一聊什么是手动装配. 手动装配就是我们在先前讲的那些,要自己给定属性,然后赋值 Spring IOC容器可以自动装配Bean,需要做的仅仅实在<bean>的aut ...

  6. safari打开的页面数字识别变为蓝色

    今天网页碰到一个很怪异的问题:app打开的一个网页样式是好的,但通过safari打开后数字的颜色变为蓝色,并且还变得可点击了! 原来safari总会把长串数字识别为电话号码,文字变成蓝色,点击还会弹出 ...

  7. 时间插件--daterangepicker使用和配置详解

    1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...

  8. 自定义组件的properties和data

    // components/epsoide/index.js Component({ /** * 组件的属性列表 */ properties: { index: { type: Number //va ...

  9. CAN报文 Intel 格式与Motorola 格式的区别

    当一个信号的数据长度不超过 1 个字节(8 位)时,Intel 与 Motorola 两种格式的 编码结果没有什么不同,完全一样.当信号的数据长度超过 1 个字节(8 位)时,两者的编码结果出现 了明 ...

  10. pgsql 并行相关配置