前端学习(三十四)对象&模块化(笔记)
人,工人
//类的定义
function Person(name,age){ //构造函数
//工厂模式
//1.原料
//var obj = new Object();
//2.加工
this.name = name;
this.age = age;
//3.出厂
//return obj;
}
//方法
Person.prototype.showName = function(){
return this.name;
};
//实例化
var p1 = new Person('zhangsan',28);
new:
1. 创建一个新的空白对象
2. 把这个对象赋值给 this
3. 自动返回this
//继承 工人 -> 人
1)继承属性
function Worker(name,age,job){
//继承父类属性
Person.apply(this,arguments);
//增加自己的属性
this.job = job;
}
2)继承方法
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
* 万物皆对象
* 能new的东西都是函数
* 构造函数约定首字母大写
* 实例化一个类的时候(new Person()),构造函数自动执行
* 类的原型 prototype 可以用来扩展系统方法
* 解决this:
1) 在this正确的地方,存一下
2) fn.call(this的指向,参数1...);
3) fn.apply(this的指向,[参数1....]);
4) bind
var a = fn.bind(this的指向,参数1);
a(参数2);
//this 正确
oBtn.onclick = function(){
//this 指向按钮,希望指向外面
}.bind(this);
* 类型检测
1) typeof : 基本类型
数字,字符串,布尔,undefined
2)instanceof : 用于检测 当前对象是不是某个类的实例, 包含父级以及一直向上
alert(p1 instanceof Person); √
alert(p1 instanceof Object); √
3)constructor:用户判断当前对象的是不是由某个类构造出来的
p1.constructor == Person
==========================
一、ES6前面向对象周边的知识
1、给一个类的原型上加方法时,要一个一个加,不能用一个JSON整体覆盖,否则,会把原来已经有的东西覆盖掉(prototype.constructor 被覆盖)
2、原型链
使用某个方法或属性时,先看自己有没有,如果自己有就用自己的,否则找父级...一直找到为止 —— Object
* 如果一个对象属于子类,那么这个对象必然属于这个子类的父类。
* 作用链:
var c = 100;
function aaa(){
var c = 5;
function bbb(){
//var c = 12;
alert(c);
}
bbb();
}
aaa();
show(1)(2)(3); —— 6 //返回函数
aa(1).bb(2).cc(3); —— 6 //返回JSON
3、所有东西都是对象?
基本类型不是对象。
除了基本类型外,其它的东西都是对象。
包装类型:
数字 Number
字符串 String
布尔 Boolean
undefined Undefined ×
* 包装类型,在JS中,没用。
4、单体模式/单例模式 设计模式
以前: 工厂模式
* 只有一个实例,不能扩展 —— 利用 JSON
let Person = {
name:'张三',
age:18,
showName(){
return this.name + '^_^';
}
};
5、命名空间
利用JSON,把一些独立的模块、频道、子系统 ,中使用的变量的包起来。
达到: 避免变量名冲突
例:
let top = {
a:12
}
let body = {
a:5
}
let footer = {
a:20
}
top.a
body.a
footer.a
变量冲突的解决:
1、封闭空间
2、面向对象 : 把相同的变量放到不同的对象里
3、命名空间(名称空间)
4、模块化
6、this 的问题
this: 发生事件的对象(元素),当前方法属于谁,this就是谁
对this优先级进行排序:只供参考
1) new > 定时器
2) 定时器 > 事件
3) 事件 > 方法
4) 其它 (window)
优先级: new > 定时器 > 事件 > 方法
7、js 中的 BUG (自相矛盾的地方)
1、Object 和 Function 互为爹,自称爹
* 一切都是对象
* 能new 都是函数
2、只认爹,不认爷
3、花祖宗的钱,不认祖宗
==========================
二、ES6面向对象
类、构造函数 —— 面向对象(java)
类:
定义——
//类
class Person{
//构造函数
constructor(name,age){
this.name = name;
this.age = age;
}
//方法
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
使用——
let p1=new Person('zhang3',28);
继承:
class Worker extends Person{
constructor(name,age,job){
super(name,age); //相当于调用 父级 的构造函数
this.job = job;
}
showJob(){
return this.job;
}
}
*super —— 超类
==========================
用面向对象的方式写程序 , 没有统一的写法。
例1:点div变红
例2:选项卡
==========================
模块化:
一、什么,为什么
模块化:把一个大的系统,一个较复杂的功能,切分为若干个小部分。
有利于 系统的扩展、人员之间分工合作、可以提高效率...
二、JS中模块化:
09年,美国,一哥们,写了一个程序 —— NodeJS
标志着JS中模块化开发的开始。
三、JS中模块化遵循的标准:
CommonJs: NodeJS —— 同步
const express = require('express');
let server = express();
AMD: —— 异步
Asynchronous Module Definition 异步模块定义
库:requirejs
CMD:
库:seajs
官网: seajs.org
四、requirejs
安装:
1) 官网下载
http://requirejs.org/
2) npm i requirejs
前端学习(三十四)对象&模块化(笔记)的更多相关文章
- 前端学习(三十五)模块化es6(笔记)
RequireJs:一.安装.下载 官网: requirejs.org Npm: npm i requirejs二.使用 以前的开发方式的问题: 1).js 是阻塞加 ...
- 前端学习(十四):CSS布局
进击のpython ***** 前端学习--CSS布局 每个模块的相关央视就算是进本上都完成了,但是,这些模块想放在不同的位置 横着放,竖着放,斜着放... ... 想怎么放怎么放 那就用到了今天要说 ...
- 前端学习(三十六)promise(笔记)
一个页面: 头部.用户信息.新闻列表 jquery ajax: 1.$.ajax({ url:'', dataType:'json', }).then(res=>{ //r ...
- 前端学习(三十八)vue(笔记)
Angular+Vue+React Vue性能最好,Vue最轻=======================================================Angular ...
- 前端学习(三十)es6的一些问题(笔记)
赋值表达式 document.onclick = document.onmouseover = fn; var a = b = c = d = 5; 不推荐 逗号表 ...
- 前端学习(三十九)移动端app(笔记)
移动端App 开发App的三种方式 Native App 原生 底层语言 java Android oc ...
- 前端学习(三十七)angular(笔记)
MVC 后台 M Module 数据层 V View 视图层 C Contro ...
- 前端学习(三)css选择器(笔记)
字体样式: color:red: font-size:12px: font-weight:bold/normal; font-style:italic/normal; f ...
- Salesforce LWC学习(三十四) 如何更改标准组件的相关属性信息
本篇参考: https://www.cnblogs.com/zero-zyq/p/14548676.html https://www.lightningdesignsystem.com/platfor ...
随机推荐
- 【HDOJ6667】Roundgod and Milk Tea(模拟)
题意:有n个班级,每个班级有a[i]个人,b[i]杯奶茶 每个人至多喝一杯奶茶,且不能喝自己班的 问能喝到奶茶的最多总人数 n<=1e6,a[i],b[i]<=1e9 思路: 做法一: # ...
- PHP操作Excel – PHPExcel 基本用法
利用PHP实现对于Excel的写入和读取,主要借助于PHPExcel插件来完成. 准备工作: 1.下载PHPExcel的SDK,下载地址:https://github.com/PHPOffice/PH ...
- 史上最全USB HID开发资料
史上最全USB HID开发资料 史上最全USB HID开发资料,悉心整理一个月,亲自测试. 涉及STM32 C51 8051F例子都有源码,VC上位机例子以及源码,USB协议,HID协议,USB抓包工 ...
- MATLAB 用 imresize() 函数缩小图象是 double 和 uint8 有差别
今天发现一个奇怪的现象. 在用 imresize() 缩小图象时,如果图象时 double 格式的,缩小后会产生不连通的现象. 下面是原图: 对这张图象 img 做 simg = imresize(i ...
- docker 部署ftp
1.搜索ftp镜像 docker search vsftpd 2.拉取ftp镜像 docker pull fauria/vsftpd 3.启动ftpdocker docker run -d -v /h ...
- 【ABAP系列】SAP 后台JOB如何DEBUG
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 后台JOB如何DEBUG ...
- 剑指offer第二版面试题5:从尾到头打印链表(JAVA版)
题目描述: 输入一个链表,从尾到头打印链表每个节点的值.返回新链表. import java.util.Stack; //定义链表结构 class ListNode { int value; List ...
- 2019牛客暑期多校训练营(第三场)H Magic Line
原题链接:H Magic Line 题意简述: 给定n个点,要求画一条直线将n个点分成均有n / 2个点的两部分,不能有点在线上: 解题思路: 首先,先将所有的点进行以x为第一关键字,y为第二关键字 ...
- 基于vux的Vue路由切换动画
const history = window.sessionStorage history.clear() let historyCount = history.getItem('count') * ...
- Mysql 实现基于binlog的主从同步
工作原理 1.主节点必须启用二进制日志,记录任何修改了数据库数据的事件.2.从节点开启一个线程(I/O Thread)把自己扮演成 mysql 的客户端,通过 mysql 协议,请求主节点的二进制日志 ...