如何編寫高性能的JavaScript?
遵循嚴(yán)格模式:"use strict";
將js腳本放在頁面底部泛释,加快渲染頁面
將js腳本將腳本成組打包滤愕,減少請求
使用非阻塞方式下載js腳本
盡量使用局部變量來保存全局變量
盡量減少使用閉包
使用 window 對象屬性方法時(shí),省略 window
盡量減少對象成員嵌套
緩存 DOM 節(jié)點(diǎn)的訪問
通過避免使用 eval() 和 Function() 構(gòu)造器
給 setTimeout() 和 setInterval() 傳遞函數(shù)而不是字符串作為參數(shù)
盡量使用直接量創(chuàng)建對象和數(shù)組
最小化重繪(repaint)和回流(reflow)
JavaScript如何實(shí)現(xiàn)一個(gè)類怜校,怎么實(shí)例化這個(gè)類间影?
構(gòu)造函數(shù)法(this + prototype) -- 用 new 關(guān)鍵字 生成實(shí)例對象
缺點(diǎn):用到了 this 和 prototype,編寫復(fù)雜韭畸,可讀性差
function Mobile(name, price){
this.name = name;
this.price = price;
}
Mobile.prototype.sell = function(){
alert(this.name + "宇智,售價(jià) $" + this.price);
}
var iPhone7 = new Mobile("iPhone7", 1000);
iPhone7.sell();
Object.create 法 -- 用 Object.create() 生成實(shí)例對象
缺點(diǎn):不能實(shí)現(xiàn)私有屬性和私有方法,實(shí)例對象之間也不能共享數(shù)據(jù)
var Person = {
firstname: "Mark",
lastname: "Yun",
age: 25,
introduce: function(){
alert('I am ' + Person.firstname + ' ' + Person.lastname);
}
};
var person = Object.create(Person);
person.introduce();
// Object.create 要求 IE9+胰丁,低版本瀏覽器可以自行部署:
if (!Object.create) {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
極簡主義法(消除 this 和 prototype) -- 調(diào)用 createNew() 得到實(shí)例對象
優(yōu)點(diǎn):容易理解随橘,結(jié)構(gòu)清晰優(yōu)雅,符合傳統(tǒng)的"面向?qū)ο缶幊?的構(gòu)造
var Cat = {
age: 3, // 共享數(shù)據(jù) -- 定義在類對象內(nèi)锦庸,createNew() 外
createNew: function () {
var cat = {};
// var cat = Animal.createNew(); // 繼承 Animal 類
cat.name = "小咪";
var sound = "喵喵喵"; // 私有屬性--定義在 createNew() 內(nèi)机蔗,輸出對象外
cat.makeSound = function () {
alert(sound); // 暴露私有屬性
};
cat.changeAge = function(num){
Cat.age = num; // 修改共享數(shù)據(jù)
};
return cat; // 輸出對象
}
};
var cat = Cat.createNew();
cat.makeSound();
ES6 語法糖 class -- 用 new 關(guān)鍵字 生成實(shí)例對象
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var point = new Point(2, 3);
Javascript如何實(shí)現(xiàn)繼承?
構(gòu)造函數(shù)綁定:使用 call 或 apply 方法,將父對象的構(gòu)造函數(shù)綁定在子對象上
function Cat(name,color){
Animal.apply(this, arguments);
this.name = name;
this.color = color;
}
實(shí)例繼承:將子對象的 prototype 指向父對象的一個(gè)實(shí)例
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
拷貝繼承:如果把父對象的所有屬性和方法萝嘁,拷貝進(jìn)子對象
function extend(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}
原型繼承:將子對象的 prototype 指向父對象的 prototype
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
ES6 語法糖 extends:class ColorPoint extends Point {}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 調(diào)用父類的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 調(diào)用父類的toString()
}
}
javascript創(chuàng)建對象的幾種方式梆掸?
javascript創(chuàng)建對象簡單的說,無非就是使用內(nèi)置對象或各種自定義對象,當(dāng)然還可以用JSON牙言;但寫法有很多種酸钦,也能混合使用
對象字面量的方式
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
用function來模擬無參的構(gòu)造函數(shù)
function Person(){}
var person=new Person();//定義一個(gè)function,如果使用new"實(shí)例化",該function可以看作是一個(gè)Class
person.name="Mark";
person.age="25";
person.work=function(){
alert(person.name+" hello...");
}
person.work();
用function來模擬參構(gòu)造函數(shù)來實(shí)現(xiàn)(用this關(guān)鍵字定義構(gòu)造的上下文屬性)
function Pet(name,age,hobby){
this.name=name;//this作用域:當(dāng)前對象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert("我叫"+this.name+",我喜歡"+this.hobby+",是個(gè)程序員");
}
}
var maidou =new Pet("麥兜",25,"coding");//實(shí)例化咱枉、創(chuàng)建對象
maidou.eat();//調(diào)用eat方法
用工廠方式來創(chuàng)建(內(nèi)置對象)
var wcDog =new Object();
wcDog.name="旺財(cái)";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();
用原型方式來創(chuàng)建
function Dog(){
}
Dog.prototype.name="旺財(cái)";
Dog.prototype.eat=function(){
alert(this.name+"是個(gè)吃貨");
}
var wangcai =new Dog();
wangcai.eat();
用混合方式來創(chuàng)建
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+"卑硫,我現(xiàn)在賣"+this.price+"萬元");
}
var camry =new Car("凱美瑞",27);
camry.sell();