Front
12 Nov 2017

前端(JS)常用方法（随手记）

JS定义类

1、工厂方式

function Car(color,door){
    var ocar = new Object;
    ocar.color = color;
    ocar.doors = door;
    ocar.showColor = function(){
    document.write(this.color)
        };
    return ocar;
}
var car1 = Car(“red”,4);
var car2 = Car(“blue”,4);
car1.showColor() //output:”red”
car2.showColor() //output:”blue”

每次调用时都去创建新的属性以及函数

2、构造函数方式

function Car(color,door){
    this.color = color;
    this.doors = door;
    this.showColor = function(){
        alert(this.color)
        };
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);

每次调用都会为对象创建自己的方法

3、原型方式

//定义 
function Car() { }; 
    Car.prototype.color = "red"; 
    Car.prototype.doors = 4; 
    Car.prototype.drivers = new Array("Tom", "Jerry"); 
    Car.prototype.showColor = function() { 
        alert(this.color); 
        } 
//调用： 
var car1 = new Car(); 
var car2 = new Car(); 
    car1.showColor(); 
    car2.showColor(); 
    alert(car1.drivers); 
    car1.drivers.push("stephen"); 
    alert(car1.drivers); //结果：Tom,Jerry,stephen 
    alert(car2.drivers); //结果：Tom,Jerry,stephen 
//可以用json方式简化prototype的定义: 
Car.prototype = { 
    color: "red", 
    doors: 4, 
    drivers: ["Tom", "Jerry",'safdad'], 
    showColor: function() { 
        alert(this.color); 
        } 
}

利用对象的prototype属性，可把它看出创建新对象所依赖的原型

4、混合的构造函数/原型模式

function Car(color,door){
    this.color = color;
    this.doors = door;
    this.arr = new Array(“aa”,”bb”);
}
Car.prototype.showColor(){
    alert(this.color);
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);
    car1.arr.push(“cc”);
    alert(car1.arr); //output:aa,bb,cc
    alert(car2.arr); //output:aa,bb

原型的所有属性都会立即赋予要创建的对象

5、动态原型方式

function Car(color,door){
    this.color = color;
    this.doors = door;
    this.arr = new Array(“aa”,”bb”);
    if(typeof Car._initialized == “undefined”){
    Car.prototype.showColor = function(){
    alert(this.color);
        };
    Car._initialized = true;
    }
}

使用一个标志来判断是否已经给原型赋予了方法。保证该方法只创建一次

6、混合工厂方式

function Car(){
    var ocar = new Object();
        ocar.color = “red”;
        ocar.doors = 4;
        ocar.showColor = function(){
            alert(this.color)
        };
    return ocar;
}

对象是否是数组

var isArray=function(value) {
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);
    } else {
        return Object.prototype.toString.call(value) === "[object Array]";
            }
    }

立即执行函数

(function(a){  console.log(a); })(123);  
(function(a){  console.log(a);  }(1234));  
!function(a){  console.log(a); }(12345);  
+function(a){  console.log(a); }(123456);  
-function(a){  console.log(a); }(1234567);  
var fn=function(a){  console.log(a);  }(12345678)
//DOM文档加载完执行
$(function(){ })
//等效
$(document).ready(function(){ });
//优于: 图片等元素加载完执行 
window.onload

异步函数：async、await、Promise

async function (){
    return await new Promise(function (resolve, reject) {
         if (error) return reject(error);   
            resolve();
        }).then(function(val) {
            return val;
        }).catch(function(err){
        console.log(err)
        })
    }
Tags: