Javascript - 面向对象
1 创建对象
在 JavaScript 中可以通过多种方式创建对象。
1.1 字面量的方式
var student = {name:"某某某",type:"练习生",like:"唱跳rap篮球",rap:function(){console.log("X你太美")}
}console.log(student)
student.rap()
- 优点:写起来简单方便
- 缺点:如果要生成大量的类似的对象,那么将会写一堆重复的代码
1.2 工厂模式
function Student(name,type,like){return {name:name,type:type,like:like,rap:function(){console.log("X你太美")}}
}var s1 = Student("某某某","篮球运动员",'篮球')
console.log(s1)
- 优点:可以快速生成批量的对象
- 缺点:对象的同样的方法(函数),每创建一个对象,都会生成一个一摸一样的函数,所以会占用很多不必要的内存
1.3 构造函数创建对象
function Teacher(name,type){this.name = name;this.type = type;this.rap = function(){console.log(":)");}
}var t1 = new Teacher('苍老师','演员');
t1.rap();
如果不用 new 来调用函数,那么就是一个普通的函数调用,并且 this 的指向是 window 关键字
如果用了 new,就会创建一个新的对象,并且将对象给到 t1
这种方法还是会生成很多同样的方法,我们可以这样改进:
function Teacher(name,type){this.name = name;this.type = type;/*this.rap = function(){console.log(":)");}*/
}
Teacher.prototype.rap = function () {console.log(':)');
}
var t1 = new Teacher('苍老师','演员');
t1.rap();
这样就可以让多个 Teacher 的对象共用一个方法,我们可以在控制台中看到,实际上这个方法存在父类(prototype)里面。
1.4 ES6 的 class 写法
前面的方法其实逻辑多少都有点怪异,我们一般采用这种 class 的写法。只是语法变得更人性化,实际上的底层操作方式,还是前面三种方法。
class Student{constructor(name,type){this.name = name;this.type = type;}rap(){console.log(':(');}
}
var t2 = new Student('加藤鹰','演员');
通过控制台可以看到,底层的处理方式是一样的,但是这种写法更易于解读。
2 继承
这里直接让 Student 继承 Teacher
function Teacher(name,type){this.name = name;this.type = type;/*this.rap = function(){console.log(":)");}*/
}
Teacher.prototype.rap = function () {console.log(':)');
}
var t1 = new Teacher('苍老师','演员');
t1.rap();class Student extends Teacher{constructor(name,type){super();this.name = name;this.type = type;}rap(){console.log(':(');}
}
var t2 = new Student('加藤鹰','演员');
注意,子类的构造器一定要有 super() 语句,调用父类构造器。
当我们用控制台调用 t2 的 rap 方法,输出是 “:(”,我们要通过 t2._proto_._proto_.rap() 才能访问到父类的同名方法。
3 DOM 对象
DOM 对象,就是 HTML 页面的文档对象。整个网页的显示,都由 Document 对象构成。文档对象又由许多的元素对象构成,文档对象就有许多的属性和方法,用来操纵整个页面的显示,以及事件的处理。所有的元素对象最终组成庞大的 DOM 树。
3.1 查找 DOM 对象
在 ES5 以前,我们可以通过 ID,class,标签名查找元素对象。
//通过ID查找元素对象
var d1 = document.getElementById("d1")
console.log(d1)
//通过class查找元素对象
var abc = document.getElementsByClassName('abc')
console.log(abc)
//通过标签名称查找元素对象
var div = document.getElementsByTagName("div")
console.log(div)
通过 class 和 标签名找出来的是元素数组
ES5 后,可以用我们写 css 时的选择器的方式查找元素对象,更精确,更方便。
//选择单个元素,document.querySelector,选择器的写法,直接使用css选择器的写法,选择器如果能够匹配过个元素,那么只选择第一个元素
var div1 = document.querySelector("div")
console.log(div1)
var id1 = document.querySelector("#d1")
console.log(id1)
var abc1 = document.querySelector('body .abc')
console.log(abc1)//选择多个元素,document.querySelectorAll()
var abc2 = document.querySelectorAll("#d1")
console.log(abc2)
3.2 设置 DOM 对象
找到了我们所需要的元素之后,我们就需要对元素内部的属性进行修改。
标签间的内容都存储在元素的 innerHTML 属性里面,例如我们想对某个 style 标签的内容进行修改:
s1.innerHTML = 'h1{color: red;}';
我们也可以在获得元素对象后,直接设置元素的样式:
element.style.background = "skyblue";
element.style.Color = "yellow";
我们可以在元素(标签)内再插入元素(标签)。步骤是先用 creatElement 方法创建子元素,接着设置好子元素的内容后,用父元素的 appendChild 方法将其插入。
//创建元素
var s1 = document.createElement("style")
//设置s1的innerHTML的内容
s1.innerHTML = 'h1{color: red;}';
//将style元素插入到HTML页面的body里
document.body.appendChild(s1)
元素具有的所有属性我们都可以通过控制台查看并对其进行修改,方法和上述方法都大同小异。
4 事件
每一个事件调用的执行函数,都会默认传入一个事件对象,这个对象会包含当次事件的相关信息,例如点击、鼠标的移动、键盘的按键、手指的触屏、聚焦等等。事件根据捕获方式分为“冒泡事件”、“捕获事件”。
冒泡事件:事件由最里面一层一层向上触发,直到HTML元素,那么这种事件模式就是冒泡事件。默认情况下就用冒泡。
捕获事件:由HTML开始一层一层向下出发,直到最小的子元素,那么这种事件模式就是捕获
4.1 on
我们可以通过 "on事件名称 = function(){}" 的方法设置时间,这种方法简单方便,但缺点也很明显,一个事件只能调用一个函数,而且只能是“冒泡事件”。
h1.onclick = function(){h1.style.backgroundColor = "deeppink"
}
这种写法可以写在 script 标签里,也可以直接在元素的标签内作为属性写入,属性的值为一个方法,例如
<h1 onclick="abc()">helloworld</h1>
<script type="text/javascript"> function abc(){h1.style.color = "skyblue"}
</script>
4.2 addEventListener
这种方式是 ES5 之后才有的,同一事件可以通过几个 addEventListener 语句调用多个函数,而且可以手动设置是捕获事件还是冒泡事件。语法:
h1.addEventListener("事件的名称",事件调用起的函数(),true/false(捕获/冒泡))
最后一个参数省略就是默认 false
4.3 事件对象
每次事件调用执行函数前,会将对应的事件对象作为参数传入,例如对于点击事件,我们可以通过事件获得点击点的坐标,点击的时间等信息。
<h1>helloworld</h1>
<script type="text/javascript">var h1 = document.querySelector('h1')h1.onclick = function(event){//事件对象会存放这一次事件的相关信息console.log(event)}
</script>
转载于:https://www.cnblogs.com/carlosouyang/p/10952094.html
Javascript - 面向对象相关推荐
- JavaScript面向对象编程
自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升.JavaScript最基本的使用,以及语法.浏览器对象等等东东在这里就不累赘了.把主要篇幅放在如何实现JavaScri ...
- 《JavaScript面向对象精要》读书笔记
JavaScript(ES5)的面向对象精要 标签: JavaScript 面向对象 读书笔记 2016年1月16日-17日两天看完了<JavaScript面向对象精要>(参加异步社区的活 ...
- javascript面向对象系列第一篇——构造函数和原型对象
前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如何用构造函数和原型对象来创建对象 构造函数 构造函数是 ...
- 用JSON和Javscript的prototype来构建完善的Javascript面向对象表示法
[原文地址:http://www.cnblogs.com/robinhood/archive/2006/11/16/515412.html] 上次发贴没能很好的总结Javascrip编写类的方法,这次 ...
- 《JavaScript面向对象精要》——1.8 原始封装类型
本节书摘来自异步社区<JavaScript面向对象精要>一书中的第1章,第1.8节,作者:[美]Nicholas C. Zakas 译者: 胡世杰 更多章节内容可以访问云栖社区" ...
- 《JavaScript面向对象编程指南》——第1章 引言1.1 回顾历史
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.1节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...
- 《JavaScript面向对象编程指南》——1.3 分析现状
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.3节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...
- JavaScript面向对象及原型 及setTimeout
JavaScript面向对象 最笨的写法: function Foo(n) { this.name = n; this.sayName = function() { c ...
- JavaScript面向对象的支持(7)
================================================================================ Qomolangma OpenProj ...
- (二)Javascript面向对象编程:构造函数的继承
Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...
最新文章
- 打造交叉复合型数据人才的高地:清华大学大数据能力提升项目宣讲会成功举行!...
- Office 365系列之四:添加自定义域
- C#中static静态变量的用法
- FPGA/CPLD按键硬件延时消除抖动的思路
- shm_overview(7)
- excel分两个独立窗口_Excel2010 多个独立窗口,解决单窗口无法显示多个文件的问题...
- Django之URLconf路由
- Atitit 人工智能声音处理乐器总类以及midi规范的标示 目录 1. Atitit 乐器分类 打击乐器	1 1.1. 1.1. 打击乐器(各种鼓 三角铁等	1	2 1.2. 1.2. 管乐器
- HDMI接口 PCB布线指南-4层板为例
- 服务器违反了协议,IMAP协议违规:未知消息的EXPUNGE响应?
- Dockerfile 概念简介
- html做群聊通讯方法,一例完整的websocket实现群聊demo
- 苹果摄像头黑屏_报道称苹果已将折叠 iPhone 送往测试/苹果官网上线送份好礼,送到心里页面/iPhone 12 mini 拆解报告公布...
- UI设计到底是什么:什么叫ui设计?
- 微信小程序开发开篇词 自顶向下,云端赋能:小程序的高效开发之道
- kotlin入门,Android快速转战Kotlin教程,重难点整理
- 用ENVI建立掩膜消除图像背景
- STM32——蓝牙模块HC06
- 进阶爬虫:今日头条街拍美图
- VASP 5.4.4 保姆级安装全过程 (附带vaspkit)
热门文章
- HTML+CSS制作3D步数统计界面
- unity android 在后台运行_Unity问答 | 盘点2019年社区优秀问答
- spring boot文件的上传与下载
- 家里的所有网线都集中到了弱电箱怎么组网?
- 父母有退休工资和没有退休工资的比较,家庭生活区别大吗?
- http与https的有什么不同
- 有幸和一位企业家聊天,他白手起家
- 有人说,互联网电商把1000个实体店老板赚的钱,让10个互联网电商赚走了
- 微信公众号可以开店吗?
- Maven的一些资源(配置方法、idea中toggle offline mode:切换脱机模式、idea中Toggle ‘Skip Tests’ Mode、 Dependencies 出现红色波浪线)