性能优化、面向对象、引用
2017-11-10 本文已影响0人
z_j_r
前言：
现在不玩命，将来命玩你，现在不努力，未来不给力
--------------------------------正文---------------------------------
性能优化
原因：
1.稳定
2.扩展
3.性能
包含：
网络性能
执行性能
1、网络性能（要用到第三方工具）
Chrome NetWork 需要经验支撑分析。
Firefox YSLow（http://yslow.org/）
插件版： 必须先安装 Firebug
步骤：进入YSLow官网
点击Firefox
点击Add to Firefox
一定要在选项中把自动运行勾选
书签版
步骤：进入YSLow官网
点击install
把yslow按钮拖放到书签栏
重启浏览器
书签版不能检测https
有问题了。
网络性能优化方法
1.减少http请求
1个文件=一次连接+一次请求+一次等待+一次响应
100个文件=100连接+100请求+100等待+100响应
2.合并文件
a).减少http请求
b).让资源更小
4KB一个单位，不足4KB按照4KB算
3.压缩代码
让文件更小
4.使用CDN加速
5.使用GZIP压缩
6.使用DNS
7.懒加载
更多搜索：雅虎军规
2、执行性能
1.尽量不使用全局变量 （变量不回收）
2.尽量少使用闭包 （使用后变量不一定会被回收）
3.减少DOM操作 （属性太多，找的时候浪费）
4.少使用定时器 （定时器不稳定）
5.尽量使用正则操作字符串 （简单）
6.尽量不使用属性 （找起来麻烦）
7.尽量使用CSS3 （性能高）
尽量不使用属性
eg: var len = arr.length;
for(var i=0;i<len;i++){
}
字符串本身不可更改
面向对象(OOP)（不知道原理，但是不影响使用）
类 Class 泛指一类事物
对象 Object 某一个具体的东西
对象的组成
属性——特征
方法——行为
什么是属性：变量和属性一样
属性是属于某个对象的
变量是自由的
什么是方法：函数和方法一样
方法是属于某个对象的
函数是自由的
创建一个类
构造函数：因为是创建对象的
eg：
//构造函数
function Person(name,age,gender){
//工厂模式
//原料
var obj = new Object();
//加工
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.showName = function(){
return this.name;
};
obj.showAge = function(){
return this.age;
};
obj.showGender = function(){
return this.gender;
};
//出厂
return obj;
}
var p1 = Person('老王',40,'男');
var p2 = Person('李四',22,'男');
document.write(p1.showName==p2.showName); // false
出现两个问题：
1、没有new
2、同一个类的方法，不相等
加new
1.开头加new Object();
2.结尾加return this;
加方法不能直接在构造里写。
给构造的原型加
构造函数的原型：Person.prototype
属性给构造的this加
方法给构造的原型加
eg：
//构造函数
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.showName = function(){
return this.name;
};
Person.prototype.showAge = function(){
return this.age;
};
Person.prototype.showGender = function(){
return this.gender;
};
var p1 = new Person('老王',40,'男');
document.write('我叫'+p1.showName()+'，今年'+p1.showAge()+'岁，性别'+p1.showGender());
var p2 = new Person('韩梅梅',30,'女');
alert(p1.showName==p2.showName); // true
this?
不看定义，只看调用
方法是谁的，this就是谁
优先级:
高
new Object
定时器 window
方法、事件 对象本身
正常调用 window\undefind
低
如果函数不止一层，那函数只管一层、this只看最后一次调用
this永远只看最后一次调用
面向对象三大特性
封装 抽出核心封装
继承 子继承父.父类有的，子类一定有。子类有的，父类不一定有。父类改变，子类跟着变
多态 多种状态、多重继承
继承
属性
方法
Person 人类
属性：name age gender
方法：showName() showAge() showGender()
Worker 工人类
属性：name age gender job
方法：showName() showAge() showGender() showJob()
矫正this指向
fn.call(this指向谁,arg1,arg2....);
或者
fn.apply(this指向谁,[arg1,arg2,arg3...]);
属性继承
function 子类(a,b){
父类.call(this,a,b);
或者
父类.apply(this,arguments);
}
方法继承
a).
子类.prototype = 父类.prototype;
问题:
子类的私有方法，父类也有
原因:
引用
b).
for(var key in 父类.prototype){
子类.prototype[key] = 父类.prototype[key];
}
问题:
子类的实例，不属于父类
c).
子类.prototpye = new 父类();
瑕疵:
子类实例.constructor 等于父类
d).
子类.prototype = new 父类();
子类.prototype.constructor = 子类;
万物皆对象
eg:
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.showName = function(){
return this.name;
};
Person.prototype.showAge = function(){
return this.age;
};
Person.prototype.showGender = function(){
return this.gender;
};
function Worker(name,age,gender,job){
// arguments 实参参数集合
// call apply 改变this指向
Person.apply(this,arguemnts);
this.job = job;
}
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
Worker.prototype.showJob = function(){
return this.job;
};
检测
typeof 检测基本数据类型 Array、Date也是Object
instanceof 检测复合类型 检测是否是Array、Date，但检测不出这两项和Object的区别
constructor 检测构造函数 检测是否是Object，区分Array、Date和Object
原型链
先在当前实例身上找，如果没有找构造类，如果类没有找父类原型，一级一级往上找，直到找到Object的原型。如果没有就是undefined
