JS中对象的属性

更多时间：2015-8-25 类别：Web前端浏览量：1837

JS中对象的属性

JS中对象的属性

一、JS中对象属性的定义

1、属性名称可以包含英文字符、数字(不能开头)、特殊符号(如：-、_、$等等)。但一般使用纯英文字符，在特殊情况下会添加-(横杠：-webkit-、-moz- )以及 _(下划线)。

2、若属性名称包含了-(横杠)，属性访问方式只能采用'[ ]'中括号访问



var o = ...{

    x: 1,

    y: 2,

    '-x': 3,

    '-showX': function () ...{

        alert(this.x);

    }

}

// o.-x; // 此访问方式会报异常

console.log(o['-x']); // => 3 ：读取带-(横杠)名称的属性，只能采用'[ ]'中括号访问方式

o['-showX'](); // => 弹出1 ：若方法名称带-(横杠)，执行方式很别扭

二、属性的分类

1、私有属性定义

私有属性只能在构造函数内部定义与使用。


function User(age)...{ 

this.age=age; 

var isChild=age<12; 

this.isLittleChild=isChild; 

} 

var user=new User(15); 

alert(user.isLittleChild);//正确的方式 

alert(user.isChild);//报错：对象不支持此属性或方法

2、实例属性

(1)、prototype方式，语法格式：functionName.prototype.propertyName=value

(2)、this方式，语法格式：this.propertyName=value，注意后面例子中this使用的位置


function User()...{ } 

User.prototype.name=“user1”; 

User.prototype.age=18; 

var user=new User(); 

alert(user.age); 


----------------------------

function User(name,age,job)...{ 

this.name=“user1”; 

this.age=18; 

this.job=job; 

} 

alert(user.age);

3、类属性

语法格式：functionName.propertyName=value


function User()...{ } 

User.MAX_AGE=200; 

User.MIN_AGE=0; 

alert(User.MAX_AGE);

三、属性的访问方式

1、 ' . '点访问方式

属性名称必须为一个标示符(静态字符串)，不能为变量。

var o = {};

o.x = '1';

2、' [ ] '中括号方法方式

属性名称可以为一个静态字符串，也可以为一个变量。若为变量，访问的属性为变量表示的值。



var o = ...{ x: 1, y: 2 };

console.log(o['x']); // => 1 ：访问x属性

var a = 'y';

console.log(o[a]); // => 2 ：访问的是y属性(变量a的值)

说明：若读取一个不存在的属性，将返回undefined。若设置一个对象不存在的属性，将会向对象添加此属性。

四、对象的属性的删除

语法：delete obj.propertyName 或者 delete obj[propertyName]

说明：delete只能删除对象的自有属性，不能删除继承属性。



var o = ...{};

o.x = '1';

console.log(o.x); // => 1

delete o.x;

console.log(o.x); // => undefined ：访问不存在的属性，返回undefined

 

o.constructor.prototype.y = '2'; // 在原型对象上添加一个y属性

console.log(o.y); // => 2

delete o.y; // 删除继承属性y

console.log(o.y); // => 2 ：还是可以访问继承属性y

五、属性的检测

1、in 运算符



function People(name) {

    this.name = name;

}

function Student(age) {

    this.age = age;

}

Student.prototype = new People(); // 设置Student的原型为People对象

 

var s = new Student(22);

 

console.log('age' in s); // => true ：age为实例属性

console.log('name' in s); // => true ：name为继承属性

console.log('address' in s); // => false ：address不存在此对象呢，返回false

2、obj.hasOwnProperty(propertyName)

判断对象是否拥有一个指定名称的实例属性



var Student = function (name) ...{

    this.name = name;

};

// 给Student的原型添加一个sayHello方法

Student.prototype.sayHello = function () ...{

    alert('Hello,' + this.name);

}

// 给Student的原型添加一个age属性

Student.prototype.age = '';

  

var st = new Student('张三'); // 初始化对象st

console.log(st.hasOwnProperty('name')); // => true ：调用构造函数时，通过this.name附加到实例对象上

console.log(st.hasOwnProperty('sayHello')); // => false ：sayHello方法为原型上的成员

console.log(st.hasOwnProperty('age')); // => false ：age属性为原型上的成员

3、obj.propertyIsEnumerable(propertyName)

判断指定名称的属性是否为实例属性并且是可枚举的



var o = Object.create(...{}, ...{

    name: ...{

        value: 'tom',

        enumerable: true // 可枚举

    },

    age: ...{

        value: 22,

        enumerable: false // 不可枚举

    }

});

 

console.log(o.propertyIsEnumerable('name')); // => true ：name为实例属性并且可枚举

console.log(o.propertyIsEnumerable('age')); // => false ：age为实例属性但不可枚举

 

console.log(o.hasOwnProperty('age')); // => true ：hasOwnProperty()方法只判断属性是否为实例属性

六、对象的属性的遍历

1、for / in 语句块



var po = ...{ px: 1, py: 2 };

var o = ...{ x: 1, y: 2 };

o.__proto__ = po; // 设置o的原型为po

for (property in o) ...{

    console.log(property); // => 输出属性的名称：x、y、px、py

    console.log(o[property]); // => 采用中括号访问方式，输出属性的值

}

2、Object.keys(obj)

返回一个数组，包含对象可枚举的实例属性名称



var po = ...{ px: 1, py: 2 };

var o = ...{ x: 1, y: 2 };

o.__proto__ = po; // 设置o的原型为po

var propertyArray = Object.keys(o); // => 返回一个包含了可枚举的实例属性名称的数组

for (var i = 0, len = propertyArray.length; i < len; i++) ...{

    console.log(propertyArray[i]); // => 输出实例属性名称：x、y


  标签：javascript

上一篇：placeholder兼容性

下一篇：js字符串加密解密

您可能感兴趣

JS中对象的属性

JS中对象的属性

热门推荐

排行榜