This commit is contained in:
yinkanglong
2020-09-10 15:55:27 +08:00
parent e41dc12d5e
commit 6a64389ecb
32 changed files with 775 additions and 121 deletions

View File

@@ -0,0 +1,93 @@
# 原型与继承
[参考文献](cnblogs.com/loveyaxin/p/11151586.html)
## 1 函数与对象的表面关系
* 函数是函数,对象是对象。
* 函数本身也是特殊对象typeof 返回function。函数返回值可以是对象。
* 对象可以包含函数属性。typeof 返回object
* 函数可以作为对象的模板称为对象构造器typeof返回值返回object。常见的内置类型构造器首字母大写通过new关键字返回新的对象。new Arraynew Function()
* 变量可以指向函数,也可以指向对象。
* 函数的定义方法 function(){}匿名函数或者function name(){}
* 对象的定义方法 new Creator();或者{}。从对象构造器中创建对象或者直接创建对象。通过new创建的对象proto指向Creator()对象构造器。通过{}创建的对象proto指向Object()对象构造起会形成proto链。
## 2 原型
### 函数原型
* 原型的概念每一个javascript对象(除null外)创建的时候,就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。
```javascript
function Person(age) {
this.age = age
}
Person.prototype.name = 'kavin'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //kavin
console.log(person2.name) //kavin
```
* 在JavaScript中每个函数都有一个prototype属性这个属性指向函数的原型对象。函数的prototype指向了一个对象而这个对象正是调用构造函数时创建的实例的原型也就是person1和person2的原型。
![](img/prototype.png)
### 对象原型
* 每个对象(除null外)都会有的属性叫做__proto__这个属性会指向该对象的原型。
![](img/proto.png)
### construtor构造函数
* 每个原型都有一个constructor属性指向该关联的构造函数。
![](img/constructor.png)
### 实例与原型
* 当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。
```
function Person() {
}
Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';
console.log(person.name) // Daisy
delete person.name;
console.log(person.name) // Kevin
```
### 原型的原型
原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:
```
var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin
```
其实原型对象就是通过 Object 构造函数生成的,结合之前所讲,实例的 __proto__ 指向构造函数的 prototype .
![](img/proto_proto.png)
### 原型链
* 简单的回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例,结果会怎样?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。这就是所谓的原型链的基本概念。
![](img/protolist.png)
### 补充
* 函数的原型属性指向原型对象。prototype属性。
* 对象的原型属性指向原型对象。__proto__属性。
* 原型对象是实例的原型。
* 原型对象的constructor指向对象构造器也就是函数。
* 原型对象通过constructor和对象构造器通过prototype构成了指向环。
* 原型对象本身也是实例她本身也具有原型对象。通过原型对象的原型对象形成了原型链。原型对象通过__prpto__属性指向自己的原型。
> 也就是说原型对象有两个属性一个是构造器constructor指向对象构造器。另一个属性指向自身的原型对象。普通对象没有constructor属性。

View File

@@ -1,88 +0,0 @@
## 1 基础
### 为什么
JavaScript是运行在浏览器的脚本。为了能让JavaScript在服务器上运行执行服务器上的业务逻辑产生了NodeJS。
### 是什么
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境。
### 优势
* 单线程高并发。通过JS的回调方法实现了并发。
* 自带web服务器模块。
## 2 helloworld
### server.js
```
var http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// 发送响应数据 "Hello World"
response.end('Hello World\n');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');
```
```
node server.js
```
## 3 NPM
nodeJS的包管理器。
### 安装
```
$ npm install <Module Name>
$ npm uninstall express
npm install express # 本地安装
npm install express -g # 全局安装
npm install express@1.3.4 # 指定版本安装
```
### 查看
```
npm list -g
npm ls
npm search express
npm info jquery 查看jQuery相关的信息
```
### 创建
```
npm init//创建npm模块
npm adduser//注册npm
npm publish//发布模块
```
### 初始化依赖
```
npm install
```
### package.json
* name - 包名。
* version - 包的版本号。
* description - 包的描述。
* homepage - 包的官网 url 。
* author - 包的作者姓名。
* contributors - 包的其他贡献者姓名。
* dependencies - 依赖包列表。如果依赖包没有安装npm 会自动将依赖包安装在 node_module 目录下。
* repository - 包代码存放的地方的类型,可以是 git 或 svngit 可在 Github 上。
* main - main 字段指定了程序的主入口文件require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
* keywords - 关键字

View File

@@ -1,79 +0,0 @@
## 1交互式解释器
* 读取 - 读取用户输入解析输入了Javascript 数据结构并存储在内存中。
* 执行 - 执行输入的数据结构
* 打印 - 输出结果
* 循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出。
> nodeJS提供了交互式解释器的功能可以进行基本的运算和调试。
## 2回调函数
通过回调函数实现了异步编程。
```
var fs = require("fs");
fs.readFile('input.txt', function (err, data) {
if (err) return console.error(err);
console.log(data.toString());
});
console.log("程序执行结束!");
```
## 3工程构建
> CommonJS是nodejs的标准。nodejs是commonjs的实现。
### 包目录构成
* package.json 包描述文件
* bin 用于存放二进制文件的目录
* lib 用于存放JavaScript代码的目录
* doc 用于存放文档的目录
### 模块说明
* CommonJS定义分为系统模块和自定义模块。
* 系统模块包括http模块、URL模块、FS模块
* 用户自定义模块把公共的功能抽离成一个单独的js文件。需要通过exports输出require引入。
```
exports.outapi=innerfunction;
const selfmodule = require(".../module.js")
selfmodule.outapi();
```
```
module.exports obj;
const seflmodule = reuqire(".../module.js")
```
### node_moudles文件夹说明
* 工程构建过程中会自动扫描node_modules文件夹下的子文件夹。
* 如果子文件夹下有index.jsnodejs会自动识别并做为模块入口。
* 如果没有index.js则nodejs无法识别模块入口。
* 如果有package.jsonnodejs会读取配置文件并识别配置文件中的入口。包描述文件
### package.json说明
* 使用nmp init初始化一个nodejs模块生成一个package.json包描述文件。
* 使用npm install会自动下载nodejs模块对应的所有依赖。
```
{
"name": "first",//模块名字
"version": "1.0.0",//模块版本号
"main": "app.js",//模块入口
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [//模块检索关键词
"hello"
],
"author": "ykl",//模块作者
"license": "ISC"//模块开原证书
"dependencies":[
//^版本号第一位不变,~前两位不变,*版本号都不变
]
"devDependencies":{
//dev工具依赖的包。
}
}
```

View File

@@ -1 +0,0 @@
const fs = re

View File

@@ -1,86 +0,0 @@
> nodejs最著名的地方可能就是异步回调了吧。通过异步非阻塞的编程方式通过回调函数实现了通信。可以实现宏观上的单线程并发。
## ES6新特性
### let const
let const 都是块作用域。不是函数的作用域。或是对象作用域。
### 模板字符串
```
name = 'zhangsan'
age = 10
console.log(`${name}${age}`)
```
### 箭头函数
```
(err,data)={
}
```
## 2 异步方法获取数据
### 不能通过返回值获取异步方法中的数据
因为return语句执行的时候内部的运算还没有结束。
### 通过回调函数获取异步方法中的数据
```
function getData(callback){
//异步调用
setTimeout(function(){
var name = "zhangsan ";
callback(name)
},1000);
}
getData(function(aaa){
console.log(aaa);
})
```
### 通过promise获取异步方法中的数据
promise添加回调方法。p.then调用的时候复写回调方法。与之前的回调方法很相似。相当于promise代替了之前的getData方法调用异步方法。
```
var p = new Promise(function(resolve,reject){
//异步调用
setTimeout(function(){
var name = "zhangsan ";
callback(name)
},1000);
})
p.then(function(data){
console.log(data);
})
```
### async、await和promise实现异步非阻塞通信
* async想要同步必须返回promise类型
* await等待异步方法执行完成
* promise,能够作为异步方法标记await会等被标记为promise的异步方法执行完毕后获取返回值。
```
async function test(){
return new Promise((resolv,reject)=>{
var name = "zhang san "
resolve(name);
},1000)
}
async function main(){
var data = await test();
console.log(data);
}
main
```

View File

@@ -1,5 +0,0 @@
## 1 文件读入流fs.createReadStream
## 2 文件写入流fs.createWriteStream
## 3 管道流reStream.pipe(writeStream)

View File

@@ -1,6 +0,0 @@
## 1 URL解析
## 2 URL路由

View File

@@ -1,8 +0,0 @@
# 文件渲染
页面渲染主要有两种方式,后端渲染和前端渲染。
1. 后端渲染主要在服务器将动态数据加载到HTML页面然后返回HTML页面。
2. 前端渲染主要在客户端浏览器上异步请求数据加载到当前页面然后返回HTML页面。
后端渲染速度慢,但逻辑简单。前端渲染速度快,响应速度快。

View File

@@ -1,21 +0,0 @@
const http = require('http');
const url = require('url');
http.createServer(
function(request,response){
//客户端传递的信息
console.log(request.url);
//使用URL模块解析url
if(request.url!='/favicon.ico'){
var userinfo = url.parse(request.url,true).query;
console.log(userinfo.name+userinfo.age);
}
//响应客户端的信息
response.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'});
response.write("你好ddddthis is node js\n")
//结束客户端响应
response.end('hello world');
}
).listen(8081);
console.log("server runing")

View File

@@ -1,14 +0,0 @@
{
"name": "first",
"version": "1.0.0",
"description": "hello",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"hello"
],
"author": "ykl",
"license": "ISC"
}

View File

@@ -1,24 +0,0 @@
async function run(){
var a=1;
for(var i=0;i<1000000000;i++){
a++;
}
console.log("run finish");
return "run return";
}
async function run2(){
console.log(await run());
console.log("run2 finish")
return "run2 return";
}
async function run3(){
console.log(await run2());
return "run3 return";
}
run3();

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
JavaScript/img/proto.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB