js之oop <二> 对象属性

js中对象属性可以动态添加和删除。删除对象属性用delete关键字。

    function obj(){  }
    var oo = new obj();
    oo.a = "a";
    oo.b = "b";
    oo.a; //输出a
    oo.b; //输出b
    delete oo.a;
    oo.a; //输出undefined

在js中对象的属性以键值对的方式来体现,且(在遍历时)无序。js中属性名(也就是key)可以用点来访问(或赋值),也可以用中括号key值来访问(或赋值)(用中括号key访问对象属性时,key必须是string类型)

var a = { x:5,y:2 };
a.x; //输出5
a[‘x‘];//输出5

对象属性的遍历,遍历对象属性常用有两种方法。

var obj = { a1:1, a2:2, a3:3, a4:4, a5:5 };
for(var i=1;i<=5;i++ ){
    console.log(obj[‘a‘ + i]);
}
//输出 1 2 3 4 5
var obj = { a:1, b:2, c:3, d:4, e:5 };
for(var item in obj){
    console.log(obj[item]);
}
//输出 1 2 3 4 5

这里需要注意,for in 遍历对象属性是无序的,有可能遍历到原型链上的属性。且使用 for in 遍历时只能使用[]读取属性,不能使用.读取。

function obj_pro(){}    //创建obj_pro构造器
obj_pro.prototype.f = 55;   //创建obj_pro原型属性f
var obj = new obj_pro();    //obj_pro创建obj对象
//obj对象属性循环赋值
for(var i=1;i<=5;i++){
    obj[‘a‘ + i] = (i+9);
}
//遍历obj对象属性
for(var item in obj){
    console.log(obj[item]);
}
//输出 10 11 12 13 14 55 这里遍历把原型链上的属性f遍历出来了

****************************************************************************************************************

属性的 get/set

get/set 和其他语言一样,用来封装对象属性。get设置读取,set设置写入。

var person = {
    name:"Mirage",
    get age(){
        return age;
    },
    set age(val){
        if(val < 0 || isNaN(val) || val > 150){
            age = 18;
        }else{
            age = val;
        }
    }
}
person.age = -99;
console.log(person.age);    //输出 18

age的值可以在set中做判断,同样也可以在get中做判断。

var person = {
    name:"Mirage",
    get age(){
        if(age < 0 || isNaN(age) || age > 150){
            return 18;
        }else{
            return age
        }
    },
    set age(val){
        age = val;
    }
}
person.age = -99;
console.log(person.age);   //输出 18

可以通过get/set对特定属性设置只读或不可读

var player = {
    get gameYear(){
        return 5;
    }
}
player.gameYear = 59;
console.log(player.gameYear);   //输出5

仅设置get返回值,该属性就不可修改(只读)。

var player = {
    set age(val){
        if(val < 0 || isNaN(val) || val > 150){
            age = 18;
        }else{
            age = val;
        }
    }
}
player.age = "age";      //player.pName值为18
console.log(player.age);  //输出 undefined

仅设置set,该属性可修改,但不可读取。

*****************************************************************************************************************

原型链的get/set

对构造器创建的对象设置get/set属性需要用到 Object.defineProperty 。
Object.defineProPerty函数可以添加对象属性,并修改现有属性的特性。
Object.definePerperty参数:
  object(必):目标对象(也可为对象原型添加,还可为DOM对象)。type:ObjectName(对象名)。
  propertyname(必):属性名。type:string(字符串)。
  descriptor(必):属性描述器。type:Object(对象_字面量)。

function person(){}
Object.defineProperty(person.prototype,
                      "age",
                      {
                        get:function(){
                            return age;
                        },
                        set:function(val){
                            if(val < 0 || isNaN(val) || val > 150){
                                age = 18;
                            }else{
                                age = val;
                            }
                        }
                      });
var p1 = new person();
p1.age = 6150;
console.log(p1.age);    //输出 18。

通过defineProperty可以对对象原型属性进行修改。

时间: 2025-01-07 09:26:37

js之oop <二> 对象属性的相关文章

js之oop &lt;五&gt;对象序列化

js对象序列化的过程,就是对象转换为JSON的过程.JSON.stringify() 将对象序列化成JSON.(接收对象,输出字符串) var obj = {x:2,y:3}; var str = JSON.stringify(obj); //输出 {"x":2,"y":3} 序列化时,对象的函数序列化时不会显示. var obj = {a:1,b:2,c:function(){ console.log(3); }}; var str = JSON.stringif

JS所有内置对象属性和方法汇总

JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScript有3大对象,分别是本地对象.内置对象和宿主对象. 在此引用ECMA-262(ECMAScript的制定标准)对于他们的定义: 本地对象 与宿主无关,独立于宿主环境的ECMAScript实现提供的对象. 简单来说,本地对象就是 ECMA-262 定义的类(引用类型). 这些引用类型在运行过程中需要通过new来创建所需的实例对象. 包

原来JS是这样的 - 对象属性

引子 在上一篇(原来JS是这样的 (2))刚发布的时候就阅读了那篇文章的人可能会注意到那篇曾用过"JavaScript 中万物皆对象"的说法,而在随后我发现错误后立即更新改掉了这个错误的说法.另外上一篇实质上整篇都在描述 this 到底在什么情况下会绑定到哪个对象上,看上去 JavaScript 中的对象概念的确很容易让人困惑.再看下面一个例子: var strPrimitive = "I'm mamacat"; typeof strPrimitive; // &q

JS delete 用法(删除对象属性及变量)

1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete obj.name; console.log(obj.name); //undefined 2,变量删除 var name = 'lily'; delete name; console.log(name); //lily 直接用delelte删除不了变量 3,删除不了原型链中的变量 fun.proto

js之oop &lt;四&gt;对象管理

对象扩展管理 Object.isExtensible() 检测对象是否可扩展(一般返回true).Object.preventExtensions() 防止对象扩展. var p = {p1:"a",p1:"b"}; Object.isExtensible(p); //返回true Object.preventExtensions(p); //防止对象扩展 Object.isExtensible(p); //返回false 对象可扩展情况下,则可以添加属性.若不可扩

js面对对象编程(二):属性和闭包

上篇博客中讲解了一些js对象的基本概念和用法,这篇博客讲解一下js属性方面的:公有属性,私有属性,特权方法. 如果学过java,公有属性,私有属性,特权方法(即可以访问和设置私有属性的方法)一定很熟悉,那么让我们来看看在js里如何实现呢? 1.公有属性 首先看公有的第一层意思是可以被大家所访问的,对外开放的属性,是相对于私有属性而言的: function Person(name,age){ this.name=name; this.age=age; this.getName=function()

JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

前  言 上一篇博客(https://www.cnblogs.com/qdjianghao/p/10177360.html )中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方法.静态属性/方法.原型属性/方法,并且一起来探讨一下JS中的原型与原型链. 一 成员属性与成员方法 在构造函数中,通过this.属性声明.或者实例化出对象后,通过"对象.属性"追加的.都属于成员属性

拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到这里突然想起一句话“没有任何一个题目是彻底完成的.总还会有很多事情可做......” 我想这句话程序开发大概也适用吧,前端开发人员总是可以结合自己之前学到“拖拽”相关知识,不断扩展.完善.无穷无尽.......     利用匿名函数自执行实现封装 ;(function(){ //do somethi

js中,清空对象(删除对象的属性)

在项目中,有些对象用完后需要重置,下面简单介绍下JS中清除对象的方法.方法如下: 方法一:字面量定义对象 第一步,定义一个空对象并打印出来,代码和效果: 代码: var student = {};console.log(student); 打印结果: 第二步,为对象添加属性并打印,代码和打印结果如下: 代码: student.name = "xiaoming";student.age = 12;console.log(student); 打印结果: 第三步,删除对象属性(清空对象)并打