Javscript对象和类

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

// 声明
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(); // 看来是可以的，可在运行时修改，并生效

首页 » Javscript对象和类

相关内容