03JavaScript程序设计修炼之道_ JS进阶 OOP构造函数 2019-07/21-171247***0725-200514
Posted HiJackykun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了03JavaScript程序设计修炼之道_ JS进阶 OOP构造函数 2019-07/21-171247***0725-200514相关的知识，希望对你有一定的参考价值。
note.txt
js进阶部分
1 变量及其作用域
全局变量 局部变量 作用域 作用域链
let/var 区别
const 定义常量
2 异步专题
回调函数 同步异步
es6 Promise(使用和手写实现)
3 oop
原型 原型链 面向对象 。。。
es6 class 等
4 闭包
5 面试题
...
note.md
1 变量与常量 var a = 10; var一些问题 * var重复定义 会覆盖 * 没有块级作用域 * 变量会自动提升 es6 let/const * 重复定义会报错 * 具有块级作用域 * 不存在预解析 建议多使用let const定义常量 希望某个值不希望被修改 不能重新赋值
2 javascript是什么 解释执行 预解析 1 全局预解析（所有变量和函数声明都会提升 同名函数与变量函数的优先级高） 2 函数内部预解析
执行
头等函数(First-class Function) 动态 执行环境 浏览器宿主 node 编程范式 基于原型 多范式
3 oop
对象 狭义对象 {} 广义对象 dom元素、Array、Math...... json
{ "name":"along", "sex":"M" }
1let&const.htm
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <script> 11 /* var重复定义 会覆盖 12 var a = 10; 13 var a = 20; 14 console.log(a); 15 16 if(true) { 17 var num = 100; 18 } 19 console.log(num); // 仍然可以访问 20 */ 21 // let a = 10; 22 // let a = 20; 23 /* 24 for(var i=0; i<3; i++) { 25 setTimeout(()=>{ 26 console.log(i); 27 },0); 28 } 29 */ 30 /* 31 for(let i=0; i<3; i++) { 32 setTimeout(()=>{ 33 console.log(i); 34 },0); 35 } 36 let a = 20; 37 if(true) { 38 let a = 10; // 不会污染全局 39 console.log(++a); 40 } 41 console.log(a); 42 */ 43 44 /* 45 console.log(a); // undefined 46 var a = 10; 47 变量提升 变量的声明会提升 48 var a; 49 console.log(a); 50 a = 10 51 */ 52 // console.log(a); // 报错 53 // let a = 10; 54 55 const MY_NAME = "along"; 56 //MY_NAME = "awei"; // 报错不能重新赋值 57 const arr = [‘beijing‘]; 58 arr.push("shanghai"); 59 const obj = { 60 a: 1, 61 b:2 62 } 63 obj.c = 4; 64 console.log(obj); 65 obj = {} 66 67 </script> 68 </body> 69 </html>
2js.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <script> 11 12 function a() { 13 console.log(123); 14 } 15 var a = ()=>{ 16 console.log(456); 17 18 } 19 20 a(); 21 22 23 </script> 24 </body> 25 </html>
3object.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 11 <script> 12 // 描述一个人 姓名 家庭住址 身份证号 13 var p1 = { 14 name: "zhangsan", 15 address: "北京市海淀区", 16 id:"10212000" 17 } 18 var p2 = { 19 name: "lisi", 20 address: "武汉市", 21 id:"10267400" 22 } 23 console.log(p1.id); 24 console.log(p2.address); 25 // oop 26 27 function Person(name,address,id) { 28 this.name = name; 29 this.address = address; 30 this.id = id; 31 this.printMsg = function() { 32 console.log(this.name,this.address,this.id); 33 } 34 } 35 36 let zs = new Person("zs","beijing","123456"); 37 let ls = new Person("ls","shanghai","453456"); 38 zs.printMsg(); 39 </script> 40 </body> 41 </html>
4creatObj.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 11 <body> 12 <script> 13 // 1 通过new Object() 14 let country = new Object(); // 空对象 15 country.name = "china"; 16 country.population = 13; 17 country.area = "Asia"; 18 19 country.work = function () { 20 console.log("hard working"); 21 } 22 23 // 2 {} 对象直接量 24 let p1 = { 25 name: "zhangsan", 26 address: "北京市海淀区", 27 id: "10212000" 28 } 29 let p2 = { 30 name: "lisi", 31 address: "武汉市", 32 id: "10267400" 33 } 34 let p3 = {}; 35 36 // 3 工厂函数 37 function createPerson(name,address,id) { 38 var o = {}; 39 o.name = name; 40 o.address = address; 41 o.id = id; 42 o.study = function() { 43 console.log("学到老 活到老"); 44 } 45 return o; 46 } 47 48 let lily = createPerson("lily","America","Aasdf123"); 49 console.log(typeof lily); 50 console.log(lily instanceof createPerson); // false 51 52 53 54 </script> 55 </body> 56 57 </html>
5constructor.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <script> 11 // new Date() new String() 12 // 构造函数 本质上也是普通函数 13 function Person(name,address,id) { 14 this.name = name; 15 this.address = address; 16 this.id = id; 17 18 this.study = function() { 19 console.log("学习有方法"); 20 } 21 } 22 //let p1 = Person("lucy","canada","aui8");// p1 undefined 23 let p1 =new Person("lucy","canada","aui8"); 24 console.log(p1 instanceof Person); 25 26 /* 27 构造函数 是希望别人将来通过new方式去调用，通过new方式调用 28 会返回一个对象 所以叫构造函数 29 30 new调用构造函数 内部发生了什么 31 1 实参传给形参 32 2 在内存中创建一个对象 {},并且让函数内部的this执向这个对象 33 3 执行函数体 {name:...,address:...,id:...,study:func..} 34 4 返回这个对象 35 */ 36 37 </script> 38 </body> 39 </html>
6构造函数.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <script> 11 function Animal(name,type) { 12 this.name = name; 13 this.type = type; 14 this.sleep = function() { 15 console.log("I am sleeping"); 16 } 17 } 18 let xiaohua = new Animal("xiaohua","dog"); // 实例 19 console.log(typeof xiaohua); // object 20 console.log(xiaohua instanceof Animal); // true instanceof具体对象的类型 21 console.log([] instanceof Array); // true 22 console.log(xiaohua.constructor); // 构造函数或构造器 23 24 25 </script> 26 </body> 27 </html>
以上是关于03JavaScript程序设计修炼之道_ JS进阶 OOP构造函数 2019-07/21-171247***0725-200514的主要内容，如果未能解决你的问题，请参考以下文章
03JavaScript程序设计修炼之道 2019-06-09_fe-js-053Math对象_ Date对象es6对象新变化
03JavaScript程序设计修炼之道 2019-06-04_fe-js-044es6解构赋值之数组解构_2019-06-06_20-10-17 解构赋值数组排序法
03JavaScript程序设计修炼之道_2019-06-18_20-07-52_ 02-DOM fisrt学习(同前面已更新)
03JavaScript程序设计修炼之道-2019-06-18_20-07-52-Dom 文档对象模型