JS基础入门篇（三十六）—面向对象（ 三 ）
1.class
class es6 中 为 关键字用来声明 一个 类
1.只能通过new调用
2.不存在变量提升
3.多个方法之间直接书写,不需要,隔开
4.类的方法是直接定义在类的原型上的
5.定义在类中的方法不可枚举
6.Object.keys() 和 Object.values()
下面是详细解释
1.只能通过new调用
<script>
//--------------- class ------------------
class Fn{}
//Fn(); //直接调用会报错
var f=new Fn();//必须通过new调用
console.log(f);//Fn {}
//--------------- function ------------------
function go() {}
go();//函数可以直接调用
</script>2.不存在变量提升
<script>
//---------------function解析时，会放到前面。所以不会报错-------------
go(); // 函数声明 可以 先调用 再声明
function go() {}// 函数声明
//---------------class解析时，不会放到前面。所以会报错-------------
var f=new Fn();//报错 Fn is not defined
class Fn{}
</script>3.多个方法之间直接书写 不需要,隔开
<script>
class Fn{
constructor(name,age){
this.name=name;
this.age=age;
}
say(){
console.log("我会说话");
}
}
var f=new Fn("kite","18");
console.log(f.name);//kite
console.log(f.age);//18
</script>解析：其中constructor方法和say方法之间并没有用逗给开。因为不是对象，所以不需要用逗号隔开。
4.类的方法是直接定义在类的原型上的
<script>
class Fn{
constructor(name,age){
this.name=name;
this.age=age;
}
say(){
console.log("我是"+this.name);
}
}
var f1=new Fn("kite","18");
var f2=new Fn("Mary","28");
f1.say();//我是kite
f2.say();//我是Mary
console.log(f1.say===f2.say);// true
console.log(f1.hasOwnProperty("say"));//false 表示不是自身 身上的方法
</script>5.定义在类中的方法不可枚举
class P {
constructor(name,age){
this.name = name;
this.age = age;
}
say(){ // 这个say 是 挂在 P 类 的原型上的方法
console.log("我会说话.我的名字叫:"+this.name);
}
};
var p1 = new P("kite",29);
for( var attr in p1 ){
console.log( attr );
//运行结果为
//name
//age
}6.Object.keys()和Object.values()
除了通过for in来遍历对象中的属性，可以通过Object.keys()得到对象的属性名，可以通过Object.keys()得到对象的属性值
<script>
class P {
constructor(name,age){
this.name = name;
this.age = age;
}
say(){ // 这个say 是 挂在 P 类 的原型上的方法
console.log("我会说话.我的名字叫:"+this.name);
}
};
var p1 = new P("kite",29);
console.log( Object.keys( p1 ) ); //["name", "age"]
console.log( Object.values( p1 ) ); //["kite", 29]
</script>2.继承-extends
继承
extends
注意:
构造函数中调用super 举例说明
<script>
//父类
class Fn{
constructor(name,age){
this.name=name;
this.age=age;
}
say(){
console.log("我的名字是"+this.name);
}
}
//子类
class F extends Fn{
constructor(name,age,job){
super(name,age);
this.job=job;
}
say(){
console.log("我的名字是"+this.name,"我的工作是"+this.job);
}
eat(){
console.log("我喜欢吃西瓜");
}
}
//子类实例化
var f=new F("zm",18,"worker");
f.say();//我的名字是zm 我的工作是worker
f.eat();//我喜欢吃西瓜
</script>3.自定义属性
自定义事件
创建:new CustomEvent(事件名,事件对象设置参数);
事件对象设置参数 {bubbles:true}//是否设置冒泡
绑定:元素.addEventListener
触发:元素.dispatchEvent(自定义事件实例,事件名)
举例说明：
<body>
<div id="box">box</div>
<script>
var box = document.getElementById("box");
//创建自定义属性
var c = new CustomEvent("abc", {bubbles: true});
//自定义属性绑定
box.addEventListener("abc", function () {
console.log(1);
});
box.addEventListener("abc", function () {
console.log(2);
});
//自定义属性触发
box.dispatchEvent(c, "abc");
</script>
</body>通过函数模拟自定义函数：
<script>
var obj={};
//addFn函数作用：
// 用空对象存储 事件名 和 函数
// 以以下这种方式存储
// {
// abc:[fn1,fn2];
// cfd:[fb1,fb2];
// }
function addFn( EventName,fn ) {
if(!obj[ EventName]){
obj[ EventName]=[];
}
obj[ EventName].push(fn);
}
//trigger函数作用：
//通过for循环触发函数
function trigger(EventName) {
for(var i=0;i<obj[ EventName].length;i++){
obj[ EventName][i]();
}
}
addFn("abc",function () {console.log(1);});
addFn("abc",function () {console.log(2);});
addFn("abc",function () {console.log(3);});
trigger("abc");
</script>以面向对象的方式 写 自定义事件：
<script>
class CustomEv{
constructor(){
this.obj = {};
}
addFn( EventName,fn ) {
if(!this.obj[ EventName]){
this.obj[ EventName]=[];
}
this.obj[ EventName].push(fn);
}
trigger(EventName) {
for (var i = 0; i < this.obj[EventName].length; i++) {
this.obj[EventName][i]();
}
}
}
var c=new CustomEv();
c.addFn("abc",function () {console.log(1);});
c.addFn("abc",function () {console.log(2);});
c.addFn("abc",function () {console.log(3);});
c.trigger("abc");
</script>JS基础入门篇（三十六）—面向对象（ 三 ）的更多相关文章
- JS基础入门篇（十八）—日期对象
1.日期对象 日期对象: 通过new Date()就能创建一个日期对象,这个对象中有当前系统时间的所有详细信息. 以下代码可以获取当前时间: <script> var t = new Da ...
- JS基础入门篇（十二）—JSON和Math
1.JSON JSON: 对象格式的字符串 轻量的数据传输格式 注意事项: 键名 需要 使用 双引号 包起来 JOSN有两个方法:JSON.parse和 JSON.stringify. JSON.pa ...
- JS基础入门篇（十）— 数组方法
1.join 作用: 将数组通过指定字符拼接成字符串.语法: string arr.join([separator = ',']);参数: separator可选,如果省略的话,默认为一个逗号.如果 ...
- JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- JS基础入门篇（二十七）—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- Java开发学习(三十六)----SpringBoot三种配置文件解析
一. 配置文件格式 我们现在启动服务器默认的端口号是 8080,访问路径可以书写为 http://localhost:8080/books/1 在线上环境我们还是希望将端口号改为 80,这样在访问的时 ...
- JS基础入门篇（三十四）— 面向对象（一）
1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- JS基础入门篇（六）— 数据类型
1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...
随机推荐
- [CSP-S模拟测试]:Miner（欧拉路）
题目背景 $And\ the\ universe\ said\ you\ are\ the\ daylight \\ And\ the\ universe\ said\ you\ are\ the\ ...
- git开发实战：认识git
git简介: git是分布式版本控制系统,相比较svn相比,git会在本地保存完整的提交记录,即使远程服务器宕机数据消失,可以将本地分支提交到远程服务器,本地分支会保存完整的记录.只要文件提交到git ...
- 自动化测试常用断言的使用方法（python）-(转载@zhuquan0814
自动化测试中寻找元素并进行操作,如果在元素好找的情况下,相信大家都可以较熟练地编写用例脚本了,但光进行操作可能还不够,有时候也需要对预期结果进行判断. 这里介绍几个常用断言的使用方法,可以一定程度上帮 ...
- 小程序UI自动化（一）：appium小程序自动化尝试
appium 进行 小程序自动化尝试: 由于工作中进行app自动化用的是appium,故首先尝试用appium进行小程序自动化,以美团小程序为例(python脚本实现) 一.配置基础信息 启动微信ap ...
- SimpleDateFormat 格式化时间少了12个小时
SimpleDateFormat 格式化时间少了12个小时 标签(空格分隔): java SimpleDateFormat H:一天中的小时数:0-23 h: am/pm 小时数: 1-12 publ ...
- bootstrap知识点
首先,声明本次笔记是来自biaoyansu.com表严肃老师的bootstrap课程视频. 1.基本知识:1-1.首先,Html(理解:骨骼).Css(理解:皮肤).Js(理解:神经)分工不同.1-2 ...
- Daily Life——团队冲刺博客——（领航篇）
目录 领航目标 各个成员在 Alpha 阶段认领的任务 各个成员的具体任务安排 整个项目预期的任务量 团队成员贡献值的计算规则 燃尽图 Daily Life团队冲刺博客 领航目标 各个成员在 Alph ...
- git提交时，仓库是空的，本地有源码。
应该打开cmd 归到项目路径 然后输入git push -u origin master -f 是把本地的项目强制推送到空的仓库 git init (在当前文件夹下初始化一个git仓库) git ...
- __attribute__ ((packed))字节对齐
1. __attribute__ ((packed)) 的作用就是告诉编译器取消结构在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法.这个功能是跟操作系统没关系,跟编译器有关,g ...
- Linux系统实验
前言:怎么感觉Linux运维和Linux系统实验没什么关系?该不会的还是不会(@@).记录一下几个实验吧. 本篇目录: 实验一 编程环境 实验二 文件读写 实验三 进程通信 实验一 编程环境√ 实验步 ...