js面向对象入门
通常我们写js以及调用:
function init(){
console.log("init")
}
function load(){
console.log("load")
}
init();
load();
在页面的script标签对里定义两个function,然后执行一下函数名即可。如果我们还要定义一些变量,或者别的函数啥的 ,则继续按照语法往下写。久而久之,这个页面函数不计其数,分不清哪些函数是同属一个功能,哪些函数同属另一个功能,这样很明显不友好,我之前就在几千行的js中找某个功能的N个方法,大多在一块,个别不在,很难找,特费劲。
大概是出身后端的原因,对面向对象有一定的理解,后来知道javascript也可以面向对象编程,一些写法自然也就有所变化了~
既然是面向对象编程,那么一切皆对象,我们就用对象这个点来阐述下面要讲到的面向对象编程。
什么是对象?=>万物皆对象。
对象的特征是什么=>具有一系列的属性和方法。
所以我们在进行面向对象编程的时候,重点看属性和方法。
javascript创建对象有三种方式,分别是字面量方式、函数方式、原型方式:
//字面量方式
var obj1={
init:function(){
console.log("init1")
}
};
obj1.init();
//函数方式
var obj2=function(){
this.init=function(){
console.log("init2")
}
}
var obj2=new obj2();
obj2.init();
//原型方式
function Obj3(){}
Obj3.prototype.init=function(){
console.log("init3");
}
var obj3=new Obj3();
obj3.init();
字面量方式的本质其实是javascript的语法糖,var obj1={} 等价于 var obj1 = new Object();
函数方式也不复杂,可以理解为一个类,类里面就有属性和方法,当对这个类进行实例化,也就是new操作的时候,会生成一个具备类的属性和方法的对象。
原型方式涉及到javascript中的原型和原型链,这块比较深度, 目前不做多说,仅需知道即可。
关于使用面向对象进行编程,我很早时候写了一个栗子在github,https://github.com/lovemoqing/UploadImg/blob/master/UploadImg.html 可以点开看看。
...
小结一写,在面对业务庞杂的js代码时,在编写之初就应该设计好对象,以及对象的属性和方法,一般一个功能点对应一个对象,这样在编写js的时候,根据对象的划分,代码会非常优雅,也方便后续查找和维护。总之,写法只是一个入门,面向对象还有很多待深入的地方,比如javascript设计模式等。
js面向对象入门的更多相关文章
- JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS基础入门篇(三十五)—面向对象(二)
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- Ext JS 6 入门学习资料大全(2016-12-14)
现在 sencha touch已经升级为 Ext JS 6 了重新整理下资料 官方网站:https://www.sencha.com/ 在线文档:http://docs.sencha.com/extj ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
- Ext JS 6 入门学习资料大全(2018-03-07)
现在 sencha touch已经升级为 Ext JS 6 了重新整理下资料 官方网站:https://www.sencha.com/ 在线文档:http://docs.sencha.com/extj ...
- 以选项卡的故事扯扯js面向对象
在现在的网页中,选项卡(我自己这样子叫)是非常普遍的,也是比较基础,学了原型实现选项卡也挺久了,最近在学ES6,学了用类实现选项卡,今天就在此做个总结,别的废话也不多说. 以"貌" ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
随机推荐
- 编程模型&编程思想
编程模型 1.面向对象编程OOP 2.面向切面编程AOP Java静态接口,Java动态代理,字节码提升. 面向切面的两个方面: 拦截判断:方法,注解,参数,异常 拦截执行:前置,后置,返回,异常 3 ...
- 什么?在SAP中国研究院里还需要会PHP开发?
请原谅Jerry这篇文章的题目有"标题党"的嫌疑. 没错,至少SAP成都研究院的部分团队如此,比如Jerry目前就职的SAP成都研究院数字创新空间. 之前Jerry的文章, 曾经提 ...
- spring-security原理学习
spring security使用分类: 如何使用spring security,相信百度过的都知道,总共有四种用法,从简到深为:1.不用数据库,全部数据写在配置文件,这个也是官方文档里面的demo: ...
- rabbit MQ 的环境及命令使用(一)
RabbitMQ依赖erlang,所以先安装erlang,然后再安装RabbitMQ; 先安装erlang,双击erlang的安装文件即可,然后配置环境变量: ERLANG_HOME=D:\Progr ...
- 09_Azkaban案例实践2_Command多job工作流flow
1.Command类型多job工作流flow 1.创建有依赖关系的多个job描述:第一个job:foo.job # foo.job type=command command=echo foo 2.第二 ...
- inotify+rsync文件实时同步
原文转自http://dl528888.blog.51cto.com/2382721/771533/ 之前做了“ssh信任与scp自动传输脚本”的技术文档,此方案是作为公司里备份的方法,但在实际的运行 ...
- RT-Thread--简介
RT-Thread 概述 RT-Thread,全称是 Real Time-Thread,它是一个嵌入式实时多线程操作系统,基本属性之一是支持多任务,允许多个任务同时运行,但并不是真正的同时运行,而是宏 ...
- 远程连接服务器数据库报错:Host ‘XXXXXX’ is blocked because of many connection errors
原文:https://blog.csdn.net/li_li_lin/article/details/72764683 一.我遇到的问题描述 使用Navicat for mysql连接公司的服务器数据 ...
- 【python】使用plotly生成图表数据
安装 在 ubuntu 环境下,安装 plotly 很简单 python 版本2.7+ pip install plotly 绘图 在 plotly 网站注册后,可以直接将生成的图片保存到网站上,便于 ...
- linux实操_shell自定义函数
基本语法: #定义函数 function 函数名(){ 函数体 } #调用函数 函数名 参数1 参数2... 实例:计算两个数的和. 运行后