写在博客之前的话,这是我这个刚毕业的菜鸟的第一篇博客。一口吃不成一个胖子,我也希望写的第一篇东西就让读的人醍醐灌顶。我会抱着怀疑的态度来看自己写的文章,如果有写错的地方,请大家不要被误导,如果有大神提出意见,我会验证之后进行修改。

js中对象

对象是某个特定的引用类型的实例。创建的对象的方法有两种,使用new操作符后跟Object的构造函数,还有一种是使用对象字面量。

1,这是通过new操作符然后直接给属性赋值的方法创建对象

var person=new object();
person.name="shaoqi";
perosn.age=18;
person.job='IT' person.sayName=function(){
alert(this.name)
}

2,对象字面创建对象

var person={
name:"shaoqi",
age:18,
job:"IT", sayName:function(){
alert(this.name);
}
}

js中对象的属性

js中的属性分两种,数据属性和访问器属性。两者就像c#中的字段和属性(这是我认为的)。属性在创建的是都带有一些特征值,javaScript通控制特征来定义它们的行为。

1,数据属性。

属性属性有以下几个特性:

[[Configuarable]]:表示能否通过delte删除该属性,或者将属性修改文访问器属性

[[Enumerable]]:是否可以通过for-in循环返回属性。

[[Writeable]]:是否能修改属性的值,默认为true。

[[Value]]:属性的值,默认为undefined。

我们可以用Object.defineProperty()这个方法修改属性的特性。可以用下面的代码实现上面的特性。

Configurable:

var person={
} Object.defineProperty(person,"name",{
configurable:false,
value:"shaoqi"
}) alert(person.name);
delete person.name;
alert(person.name);

你会发现name的值并没有被删除,也就是说Configurable设置为false是不能将该属性删除的。需要注意的是在非严格模式下这种做法是不会引发错误的,但在严格模式下是会发生错误的。

Writeable:

var person={
} Object.defineProperty(person,"name",{
writable:false,
value:"shaoqi"
}) alert(person.name);
person.name="ddddd"
alert(person.name);

name的值也是不会变的。

Enumerable:

var person={
} Object.defineProperty(person,"name",{
writable:false,
enumerable:false,
value:"shaoqi"
})
var keys=Object.keys(person);
console.log(keys);

可以修改Enumerable的值来看最后log打出印出来的结果。

2,访问器属性

访问器属性也有几个特性

[[Configurable]]:表示能否通过delte删除该属性,或者将属性修改文访问器属性

[[Enumerable]]:是否可以通过for-in循环返回属性。

[[Get]]:在读取属性时调用的函数。默认为undefined

[[Set]]:在写入属性时调用的函数。默认为undefined

Configurable和Enumerable和数据属性相同。下面重点介绍Get和Set的属性。

访问器属性不能直接定义的,也必须使用Object.defineProperty()来定义。

var book={
_year:2004,
edition:1
} Object.defineProperty(book,"year",{
get:function()
{
return this._year;
},
set:function(newValue){
if(newValue>2004)
{
this._year=newValue;
this.edition+=newValue-2004;
}
}
}) book.year=2006;
console.log(book.edition);

结果应该是三,在赋值的时候,调用了我们写的set函数。这个C#中的字段和属性的关系十分的相似。

3,如何获取属性的特性

在ECMAScript5中的Object.getOwnPropertyDescriptor()的方法,可以取得给定属性的描述符。可以通过他给出的属性来判断是数据属性还是访问器属性。

var book={
_year:2004,
edition:1
} Object.defineProperty(book,"year",{ get:function()
{
return this._year;
},
set:function(newValue){
if(newValue>2004)
{
this._year=newValue;
this.edition+=newValue-2004;
}
}
}) book.year=2006;
console.log(book.edition); var descript=Object.getOwnPropertyDescriptor(book,"year");
console.log(descript.value);
console.log(descript.configurable);
console.log(descript.enumerable);
console.log(descript.get);

对于访问器的value是为undefined的,其他应该没有什么问题。get的方法也都打在日记里面了。

js的属性就先讲到这里,虽然对应用方面不太重要。但对js的对象理解还是比较起作用的。下一篇准备开始写创建对象的模式,继承的模式,原型链的解释。希望自己能形成自己的知识体系。

js面向对象程序设计之属性和对象的更多相关文章

  1. 大话JS面向对象之开篇万物皆对象------(ATM取款机引发的深思)

    一,总体概要 OO(面向对象)概念的提出是软件开发工程发展的一次革命,多年来我们借助它使得很多大型应用程序得以顺利实现.如果您还没有掌握并使用OO进行程序设计和开发,那么您无疑还停留在软件开发的石器时 ...

  2. js中如何判断属性是对象实例中的属性还是原型中的属性

    ECMAScript5中的hasOwnProperty()方法,用于判断只在属性存在与对象实例中的时候,返回true,in操作符只要通过对象能访问到属性就返回true. 因此只要in操作符返回true ...

  3. JS面向对象程序设计(OOP:Object Oriented Programming)

    你是如何理解编程语言中的面向对象的? 我们研究JS和使用JS编程本身就是基于面向对象的思想来开发的,JS中的一切内容都可以统称为要研究的“对象”,我们按照功能特点把所有内容划分成“几个大类,还可以基于 ...

  4. js面向对象程序设计之构造函数

    再上一篇的开头说了创建对象的两种方式,一种是Object构造函数的方式,一种是对象字面量的方法.但这些方式创建多个对象的时候都会产生大量的重复代码.经过技术的进步也演化出来许多的创建对象的模式.本章会 ...

  5. js里面的全局属性 全局对象 全局函数

    1)全局属性 Infinity   typeof Infinity        //number NaN typeof NaN           //number undefined       ...

  6. js面向对象程序设计之继承

    在面向对象语言中继承分成两种:接口继承和实现继承.解释一下,接口继承只继承方法的签名,而实现继承则是继承实际的方法.但是ECMAScript中的函数没有签名所以无法进行接口继承,只能是实现实现继承.而 ...

  7. python程序设计——面向对象程序设计:属性

    python 3.x 的属性 可以将属性设置为 可读,可修改,可删除 # 只读属性,不允许修改和删除 class Test: def __init__(self,value): self.__valu ...

  8. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  9. JavaScript中的面向对象程序设计

    本文内容目录顺序: 1.Object概念讲述: 2.面向对象程序设计特点: 3.JavaScript中类和实例对象的创建: 4.原型概念: 5.原型API: 6.原型对象的具体使用:7.深入理解使用原 ...

随机推荐

  1. Spring Cloud部署+Mybatis整合

    一:架构简介 Spring Cloud是微服务思想的体现.每个项目单独部署,我只需要知道你服务的name就能直接调用你,而不关心你的ip和端口的变化.当接口服务不可用的时候,我能感知到你无法用了,就不 ...

  2. k3 cloud工程量清单调整后工程量为零行设置为黄色

    #引入clr运行库 import clr #添加对cloud插件开发的常用组件的引用 clr.AddReference('Kingdee.BOS') clr.AddReference('Kingdee ...

  3. IO流详解及测试代码

    IO流 (1)IO用于在设备间进行数据传输的操作 (2)分类:    A:流向       输入流 读取数据      输出流 写出数据   B:数据类型     字节流         字节输入流  ...

  4. Sublime-emmet插件的使用

    emmet是使用Sublime编写html代码时最好用的一个插件,下面简单介绍一下emmet插件的安装和使用 安装 第一步:打开sublime,首先输入command + shift + p,然后输入 ...

  5. linux NFS 服务器的安装

    1. 安装 nfs 服务 [root@allentuns ~]# yum -y install  nfs-utils rpcbind 2. 启动 nfs 服务 [root@allentuns ~]# ...

  6. case_when

    select sname,score,case when score>=20 and score<30 then 20when score>=30 and score<40 t ...

  7. 定位公众号页面,跳转之后 vuejs 失效问题

    是第一个页面的. data () { }, 写成了这样,没写返回 {} 5555~. 网页中死活可以,微信中死活不行. data () { return {} },

  8. css--图片整合(精灵图)

    图片整合(精灵图) 精灵图的优点: 减少图片的字节 减少了网页的http请求,从而大大的提高了页面的性能 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进 ...

  9. django之项目部署知识点

    一:项目部署的框架 nginx和uWSGI在生产服务器上进行的部署 二:什么是nginx? nginx是一个web服务器. 什么是web服务器? web服务器则主要是让客户可以通过浏览器进行访问,处理 ...

  10. [luogu] P3809 【模板】后缀排序 (SA)

    板子,照着题解打的倍增版. #include <iostream> #include <cstdio> #include <cstring> using names ...