使用属性方式构建对象,并给对象添加方法。此做法适用于一次使用,将代码封装起来看起来整齐一些,作用域明确一些。

// 声明
var itemLoader = {
    'url': 'http://api.store.getdemo.cn/v1/items/',
    'load': function() {
        document.writeln("从" + this.url + "返回数据");
        // 使用ajax返回数据
    }
};


// 调用
itemLoader.load();

使用函数和Prototype定义对象,Javascript并没有类,此方式可模拟类效果;通过函数定义声明属性,使用prototype定义共享的方法,在每个函数实例化时prototype将会建立与函数实例的指针,并且它可以访问函数的内部变量;

// 声明和定义
function ClsA(){
    // fn1:实例函数:实例中使用,在ClsA中是无法访问和查看的
    this.fn1 = function(){
        console.log(this);
    }
}

// fn2:原型函数:可在运行时动态修改,并对已经实例化的对象生效。
// 只有使用function定义的对象才有prototype存在;
// 使用new建立的实例中"prototype"关键字将不能访问,会提示未定义,实例中直接使用函数名方面
ClsA.prototype.fn2 = function() {
    console.log(this);
}

// fn3:类函数:类使用,实例中不能使用
ClsA.fn3 = function() {
    console.log(this);
}

使用new实例化并使用

var clsa = new ClsA();
console.log(clsa.fn1);  // Object { fn1: fn1() }
console.log(clsa.fn2);  // Object { fn2: fn2() }
console.log(clsa.fn3);  // undefined
clsa.fn1();  // Object { fn1: fn1() }
clsa.fn2();  // Object { fn2: fn2() }

查看和调用类相关特性

console.log(ClsA.fn1);  // undefined
console.log(ClsA.fn2);  // undefined
console.log(ClsA.prototype.fn2);  // function fn2()
console.log(ClsA.fn3);  // function fn3()
ClsA.prototype.fn2();  // Object { fn2: fn2(), ... }
ClsA.fn3(); // function ClsA()

如何判断是否具有实例变量、函数

/* 使用hasOwnProperty判定是否是实例变量、函数 */
console.log(clsa.hasOwnProperty("fn1"));  // true
console.log(clsa.hasOwnProperty("fn2"));  // false
console.log(clsa.hasOwnProperty("fn3"));  // false

实例化后修改原型函数是否能继承? 动态修改特性

ClsA.prototype.fn4 = function() {
    console.log("fn4",this);  // Object { fn1: fn1() }
}
clsa.fn4(); // 看来是可以的,可在运行时修改,并生效

[ 编辑 | 历史 ]
最近由“jilili”在“2018-10-29 23:14:21”修改