JS高级

回顾

特点：

1. 解释执行 解释一次执行一次 慢

2. 灵活 动态性 可以随意给对象添加属性和方法

3. 头等函数 函数 在JavaScript是一等公民，类 在Java和C#是一等公民

4. 执行环境 宿主环境

组成：

• ECMAScript -语法规范
  • 变量、数据类型、类型转换、操作符
  • 流程控制语句：判断、循环语句
  • 数组、函数、作用域、预解析
  • 对象、属性、方法、简单类型和复杂类型的区别
  • 内置对象：Math、Date、Array、基本包装类型：String、Number、Boolean
• Web APIs
  • BOM
    • onload页面加载事件，window顶级对象
    • 定时器
    • loaction、history
  • DOM
    • 获取页面元素，注册事件
    • 属性操作，样式操作
    • 节点属性，节点层级
    • 动态创建元素
    • 事件：注册事件的方式、事件的三个阶段、事件对象

阿特伍德定理：任何可以用JavaScript来写的应用，最终都将用JavaScript来写

浏览器是如何工作的：

JavaScript执行过程：

• 预解析
  • 全局预解析(所有变量和函数都会提前；同名的函数和变量函数的优先级最高)
  • 函数内部解析(所有的变量、函数和形参都会参与预解析)
    • 函数
    • 形参
    • 普通变量
• 执行

---

JavaScript面向对象

1. 现实世界：对象是单个事物的抽象
2. 程序世界：对象是一个容器，封装了属性(property)和方法(method)

面向对象编程——Object Oriented Programming (OOP)

面向过程编程——Procedural Programming

灵活、代码可复用、高度模块化特点，容易维护和开发

面向过程：把每一步分析出来，一步一步实现，最后把代码放在一起，需要整体分析

面向对象：把所需要的所有对象分析出来，提取对象每个人思考方式不同，没有对和错

面向对象与面向过程：

• 面向过程就是亲历亲为，事无巨细，面面俱到，步步紧跟，有条不紊
• 面向对象就是找一个对象，指挥得结果
• 面向对象将执行者转变为指挥者
• 面向对象不是面向过程的替代，而是面向过程的封装

面向对象的特性：

• 封装性
• 继承性
• [多态性]抽象

在JavaScript中创建对象的模板是构造函数，而在其他语言中创建对象的模板是类

创建对象：

1. var hero = new Object()；hero.name = '刘备';
2. 对象字面量 var hero = {hero :'刘备',};
3. 工厂函数 创建多个对象function createHero(name){var hero = new Object();hero.name = name;return hero;} var hero = createHero('刘备');
4. 构造函数``function Hero(name){this.name = name;} var hero = Hero(‘刘备’);`

构造函数执行过程：

1. 会在内存中创建一个空对象
2. 设置构造函数的this，让this指向刚刚创建好的对象
3. 执行构造函数中的代码
4. 返回对象

var hero = new Hero('...',...,',,,');
console.log(typeof hero);
console.log(hero.constructor);
console.log(hero instanceof Hero);

无法使用 typeof 获取对象的基本类型

constructor 构造器/构造函数，获取对象的具体类型 不建议

instanceof 判断某个对象是否是某个构造函数的实例/对象

Math对象，工具中使用静态成员

静态成员，直接使用对象来调用

实例成员，构造函数的成员就是实例成员

function Student(name, age){this.name = name;this.age = age;//多个对象，会存储多个sayHi方法//this.sayHi = function(){//console.log('大家好，我是'+ this.name);}
}
//通过Student构造函数，创造的对象，可以访问Student.prototype中的成员
Student.prototype.sayHi = function(){console.log('大家好，我是'+ this.name);
}
//读取属性，现在对象本身查找test属性，如果没有找到的话，会去原型链上查找
//设置属性，test属性在原型对象上，而在设置属性的值的时候，不会搜索原型链而是直接给对象新增一个test属性
Student.prototype.test = 'abc';//当我们改变构造函数的prototype的时候，需要重新设置constructor属性
Student.prototype = {constructor: Student,sayHi:function(){console.log('sayHi');},eat:function(){console.log('eat');}
}var s1 = new Student('ll',18);
console.log(s1.__proto__ === Student.prototype)； //true
console.log(s1.constructor === Student); //true

每一个构造函数都有一个属性 原型/原型属性

当调用对象的属性/方法的时候，先去找对象本身的属性/方法

如果对象没有该属性/方法，此时调用原型中的属性/方法

如果对象本身没有该属性/方法，原型中也没有该属性/方法，此时会报错

__proto__ 属性是非标准的属性

在原型对象中有一个属性 constructor 构造函数

constructor 作用记录了创建该对象的构造函数

构造函数、原型对象、实例/对象 之间的关系

一张图理解prototype、proto和constructor的三角关系

求数组所有偶数和

• 数组或String中的prototype 是不可以修改的

var array = [5,4,1,8];
Array.prototype.getSum = function(){var sum = 0;for(var i=0;i<this.length;i++){if(this[i]%2 ===0){sum += this[i];}}return sum;
}

Math.random()

• JavaScript ceil() 方法

• JavaScript floor() 方法

//返回了一个在指定值之间的随机整数。
function getRandomInt(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}

生成随机10个方块

var Tools = {getRandom:function(min,max){return Math.floor(Math.random()*(max-min+1)+min);}
}
function Box(parent, options){options = options || {};//设置对象属性this.backgroundColor = options.backgroundColor || 'red';this.width = options.width || 20;this.height = options.height || 20;this.x = options.x || 0;this.y = options.y || 0;//创建对应divthis.div = document.createElement('div');parent.appendChild(this.div);this.init();this.parent = parent;
}//初始化div的样式
Box.prototype.init = function(){var div = this.div;div.style.backgroundColor = this.backgroundColor;div.style.width = this.width + 'px';div.style.height = this.height + 'px';div.style.left = this.x + 'px';div.style.right = this.y + 'px';//脱离文档流div.style.position = 'absolute';
}Box.prototype.random = function(){//父容器宽度/方块宽度，总共能放都是方块var x = Tools.getRandom(0, this.parent.offsetWidth/this.width-1)*this.width;var y = Tools.getRandom(0, this.parent.offsetHeight/this.height-1)*this.height;this.div.style.left = x +'px';this.div.style.top = y +'px';
}var container = document.getElementById('container');
var array = []
for(var i=0;i<10;i++){var r = Tools.getRandom(0,255);var g = Tools.getRandom(0,255);var b = Tools.getRandom(0,255);var box = new Box(container,{backgroundColor: 'rgb('+r+','+g+','+b+')'});array.push(box);
}//定时器执行特点，会先等待对应时间才会执行对应函数
setInterval(randomBox,1000);
randomBox();
function randomBox(){for(var i=0;i<array.length;i++){var box = array[i];box.random();}
}