通常我们写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面向对象入门的更多相关文章

  1. JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  2. JS基础入门篇(三十五)—面向对象(二)

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  3. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  4. JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  5. Ext JS 6 入门学习资料大全(2016-12-14)

    现在 sencha touch已经升级为 Ext JS 6 了重新整理下资料 官方网站:https://www.sencha.com/ 在线文档:http://docs.sencha.com/extj ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  7. Ext JS 6 入门学习资料大全(2018-03-07)

    现在 sencha touch已经升级为 Ext JS 6 了重新整理下资料 官方网站:https://www.sencha.com/ 在线文档:http://docs.sencha.com/extj ...

  8. 以选项卡的故事扯扯js面向对象

    在现在的网页中,选项卡(我自己这样子叫)是非常普遍的,也是比较基础,学了原型实现选项卡也挺久了,最近在学ES6,学了用类实现选项卡,今天就在此做个总结,别的废话也不多说. 以"貌" ...

  9. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

随机推荐

  1. java 框架-分布式服务框架2Dubbo

    https://blog.csdn.net/houshaolin/article/details/76408399 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的 ...

  2. 从零开始搭建自己的.NET Core Api框架-1目录

    https://www.cnblogs.com/RayWang/p/9216820.html 系列目录 一.  创建项目并集成swagger 1.1 创建 1.2 完善 二. 搭建项目整体架构 三. ...

  3. jdk8的环境配置

    下载jdk,选择安装路径进行安装.https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  4. KVM之磁盘管理工具qemu-img小结

    基本语法: qemu-img command [command options] 主要参数: info : 查看镜像的信息: create: 创建镜像: check: 检查镜像: convert: 转 ...

  5. jdk在window系统中的配置

    其实配置很简单,百度上很多配置的复杂化了,今天办公室的某小白百度了半天也没有配置好.   我使用的是Linux ,就很多简单了很多编译器都是集成的,尤其是现在kali linux 系统觉得做得越来也好 ...

  6. python-----多进程笔记

    多进程笔记: 在Python中多进程的创建方式对比: 1.在Python中,可以通过os.fork()创建子进程,但是这种方式智能在'linux'和'unix'以及'mac'下面使用,不能跨平台,所以 ...

  7. Codeforces Round #590 (Div. 3) 万恶的自己WAC

    C题:一道简单的C题卡了半天,我太菜了 题意:给你一个n*2的矩阵,每个位置有一个数字,对应一种管道,要求通道可不可以从左上通到右下 由提议可以看出,1,2对应的是直管道,3,4,5,6对应弯管道,只 ...

  8. Splay树详解

    更好的阅读体验 Splay树 这是一篇宏伟的巨篇 首先介绍BST,也就是所有平衡树的开始,他的China名字是二叉查找树. BST性质简介 给定一棵二叉树,每一个节点有一个权值,命名为 ** 关键码 ...

  9. 字符串的新方法——includes() padStart() padEnd()

    ES6为字符串提供了一个新方法,叫做String.prototype.includes('要包含的字符串'),如果包含,则返回字符串,否则返回false 使用ES6中的字符串新方法String.pro ...

  10. 数组的新方法 forEach some filter findIndex

    forEach  some  filter  findIndex这些都属于数组的新方法,都会对数组中的每一项,进行遍历,执行相关的操作: 只不过在循环的时候有些不一样 参考资料:https://wan ...