文档章节

javascript对象---5 Object全局内置函数

奋斗的小芋头
 奋斗的小芋头
发布于 2016/11/27 00:09
字数 1451
阅读 8
收藏 1

Object全局内置函数:如下函数都是ECMASCRIP5中扩展的,不是所有浏览器都能兼容。

defineProperty(obj.filedName. configObj):  1.定义对象的数据属性。 2.定义对象访问器属性。

一. 定义一个对象的数据属性

var cat = {
                name :"tom"
            }
            //未 限制之前可以修改name
            cat.name="jerry";
            console.log(cat.name);  

-------输出   jerry

 

defineProperty(  你要限制的对象  ,要限制对象的哪一个属性,( 对于属性的配置){

value : "  "   //属性值

writable : false/true  //是否可写可修改

enumerable : false /true  // forin是否可遍历

configerable : false/true   //是否可以重新配置属性

}

 

1. 利用  defineProperty 修改对象的值

Object.defineProperty( cat, "name" ,{
                value: "jerry"
   })
 console.log(cat.name);

结果----jerry

2. writable   是否可以修改  可以定义程序全局变量不可修改

Object.defineProperty( cat, "name" ,{
                value: "jerry" ,
                writable : true,  // 当前属性是否可以修改
            })
            
            cat.name="miaomiao";  //重新修改name的值
            console.log(cat.name)

结果--------miaomiao

Object.defineProperty( cat, "name" ,{
                value: "jerry" ,  //修改name值
                writable :  false,  // 当前属性是否可以修改
            })
            
            cat.name="miaomiao";  //不可以继续修改name的值 --不报错但不修改
            console.log(cat.name)

结果--------jerry

3.用法 : 定义常量

var Math1 = {

PI : 3.1415926

}

Object.defineProperty( Math1 , ' PI', {

writable :false          //后面不加分号 加逗号 ,是一个对象

})

Math1.PI =3 ; //保证 不被修改

4. enumerable : 是否可以在 for - in循环中访问到

Object.defineProperty( cat, "name" ,{
                value: "jerry" ,
                writable : true,    // 当前属性是否可以修改
                enumerable: true, // 是否在 for - in循环中访问到

            })
            for( var i in cat ){               //获取对象中所有属性名属性值    i 属性名
                console.log(i+"的值为" + cat[i]); //属性名

            }

结果----------

如果将  enumerable 设为 false 则不能访问 name

结果-i-----

name 的值为 jerry   (没有name值)

5.configerable  //是否可以重新配置

6.使用 delete cat.name; 可以删除对象的属性

delete cat.age ;

 alert(cdat.age) ;   // undefined

二 .判断数据合理性 age不能到2200   定义对象访问器属性

1.定义对象访问器属性的作用:

数据封装,把属性信息隐藏, 只能根据开发者提供的get.、set方法访问属性信息(get、set方法可以不同时存在)

//数据的访问器属性
            var cat ={
                name :"",
                _age : "",
            };
            //在内存中可以看到 age 但访问不了,只能由 get set 方法访问   深层封装  _age
            Object.defineProperty( cat, "age", {            //定义的是age属性  不是_age 
                enumerable :true,
                configerable:true,
                get : function(){

                   alert("get");
                    return this . _age;     //赋值给age
                },
                set : function(newValue){      //设置规则

                    alert("set");
                    if(newValue >=200){
                        alert("年龄过大")
                    }else{
                        this._age = newValue; //会出现死循环  一给 this.age赋值久调用set 不能用age  所以设不同的 _age 值,将_age封装起来, 返回age
                    }
                }
                
            })
            //在访问person.age会调用get方法,set方法  不能直接访问属性,只能通过get 方法,起到封装的作用
            cat.age=300;     //年龄过大

alert(cat.age) ;----调用的是get方法   defineProperty中的属性

1.弹出---------set

2.弹出---------年龄过大--------- 没有赋值

3、弹出---------get  -----return  空值

4.弹出-----------空(没有赋值)

cat.age=100;

alert(cat.age)

1.弹出---------set

2.弹出---------get

3.弹出---------100

三.定义对象访问器属性的作用:

数据封装,把属性信息隐藏,只能根据开发者提供的 get set  方法访问属性信息(get、set方法可以不同时存在)  给属性赋值时会调用 set  方法

四.访问器属性的注意事项:

在定义set方法时只要执行属性赋值,this.age = newValue, 就会造成死循环,每次给this.age赋值又会调用this.age ,因此按照习惯在对象属性前加 _。

定义时 _age: ” “           设置属性时:    Object.defineProperty( cat, "age",  {}) 

调用时 ===》 cat . age( 不直接调用在对象中定义的属性)

四、使用Object.defineProperties 为一个对象的多个属性,进行 数据访问器属性  的赋值

Object.defineProperties( 对象 ,{ 配置})

var cat ={
                name :"",
                _age : "",
            };

Object.defineProperties( cat, {
                name:{
                    value :"Tom",
                } 
,
                
                _age : {
                    value : 0,
                    writable :false        
//不可修改
                } ,
                
                age :{                   //访问器属性
                        
                      
 get : function(){
                            console.log("get");
                            return this._age;
                    },
                  
 set : function(newValue){ //设置规则
                            console.log("set")
                            if(newValue >=200){
                              console.log("年龄过大");
                        }else{
                            console.log("赋值")
                            this._age = newValue; //会出现死循环  一给 this.age赋值久调用set 所以 _age
                        }
                    }
                }

            })
            
            console.log(cat.name);
            console.log(cat.age) ;

结果:

Tom

get

0

如果改为 给age赋值 ---不会改变因为 _age的writable :false

cat.age=100;
            console.log(cat.name);
            console.log(cat.age) ;

//结果为

set

赋值

Tom

get

0

五. Object全局内置函数

Object.getOwnPropertyDescriptor( Obj,field) :(对象 , 属性)  获取对象属性的 访问器,或 数值属性

    var cat ={
                name :"",
                _age : "",
            };
            
            Object.defineProperties( cat, {
                name:{
                    value :"Tom",
                },
                
                _age : {
                    value : 0,
                    writable :false
                },
                
                age :{
                        
                        get : function(){
                        console.log("get");
                        return this._age;
                    },
                    set : function(newValue){ //设置规则
                        console.log("set")
                        if(newValue >=200){
                            console.log("年龄过大");
                        }else{
                            console.log("赋值")
                            this._age = newValue; //会出现死循环  一给 this.age赋值久调用set 所以 _age
                        }
                    }
                }
            })
            
            var obj = Object.getOwnPropertyDescriptor( cat, "name");   (对象 , 属性)
            debugger  //到这后跟踪 obj

属性的默认值为 true

 

2,Object.getOwnPropertyDescriptor :获取对象所有属性名,不包括 prototy中属性。

var names = Object.getOwnPropertyNames(cat); //
  debugger  //到这后跟踪 names

”_age“ 也在内存中,但一看就知道是一个封装属性

3.  Object.keys(cat)   获取对象所有枚举的属性名,不包括 prototy中属性。

var keys = Object.keys(cat); 
            debugger 

如果给age中设置enumerable :true, age也出现

4 .Object.preventExtensions(对象)   锁住对象属性,使其不能拓展,也就是不能增加新的属性,原有的属性值仍然可以更改,可以删除。

可扩展对象 cat.jiao = "miao"  --可以扩展

但如果

Object.preventExtensions(cat);

cat.jiao = "miao"

8.

则对象扩展不执行

5.  Object.isExtensible(cat);  用于判断对象是否可被拓展,返回true false

6. Object.seal(cat)  让对象既不可以拓展也不可以删除属性,属性值可以修改

7.Object.isSealed(cat); //判断对象是否被密封

8.Object全局内置函数

Object.freeze( obj ) :完全冻结对象,在seal基础上,属性值也不可以修改

Object. isFrozen( obj )是否完全冻结

© 著作权归作者所有

共有 人打赏支持
奋斗的小芋头
粉丝 1
博文 161
码字总数 129412
作品 0
大连
javascript模式 读书笔记一

第一章 简介 模式 模式是指一个通用问题的解决方案。 模式分三种 设计模式 编码模式:javascript特有的 反模式:常见的 引发的问题比解决的问题更多的一种方法。 JavaScript:基本概念 面向对...

lilugirl
2014/01/21
0
1
JavaScript 基础--- (运算符/数组/函数/变量)

基本概念: 1.javascript的组成:三部分组成 (1)ECMAScript - ECMA : 欧洲计算机协会 - 有ECMA组织制定的js的语法,语句..... (2)BOM: - broswer object model: 浏览器对象模型 (3)D...

姜白告
07/30
0
0
(转)JavaScript对象模型-执行模型

转贴一篇讲Javascript的文章,文章写的很好! 原文http://blog.csdn.net/wu9xia/archive/2008/04/28/2339952.aspx 数据类型 基本数据类型 基本数据类型是JS语言最底层的实现。 简单数值类型:...

Huawu
2010/07/27
0
0
JavaScript Gerden概述

1.对象 1.1 对象使用和属性 JavaScript中所有变量都是对象,除了null和undefined 1.2 对象作为数据类型 JavaScript对象可以作为哈希表使用,主要用来保存命名的键和值的对应关系 1.3 访问属性...

Seven_7
2014/07/29
0
0
JavaScript面向对象学习——3

对象基础介绍: 1、对象是JavaScript的基本数据类型。在java中Object是所有对象的基类,在JavaScript中同样,Object是所有对象的基类,那么Object自身属性和方法在所有对象中都会体现,只是不...

learn_more
2014/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring详解

Spring详解(一)------概述 目录 1、什么是 Spring ? 2、Spring 起源 3、Spring 特点 4、Spring 框架结构 5、Spring 框架特征 6、Spring 优点   本系列教程我们将对 Spring 进行详解的介绍...

DemonsI
11分钟前
0
0
CentOS7系统Nginx安装

1、下载nginx,官方网站https://nginx.org wget https://nginx.org/download/nginx-1.14.0.tar.gz 2、下载Nginx Sticky Module,官方网站https://bitbucket.org/nginx-goodies/nginx-sticky-......

m_lm
15分钟前
0
0
使用zTree树控件(二)

1:treeNode.checked用于判断是勾选还是取消勾选。(treeNode指的是节点)

uug
15分钟前
0
0
export, import 和 export default的区别

ES6的两个功能: export 和 import export 对外输出模块 import 引入(加载)进来一个模块 一、export => import 单个变量 export var name = "lishi" 在其他文件里引用 import {name} f...

Js_Mei
20分钟前
1
0
打造RecyclerView的n级列表

先上效果图: 1.该多级列表的优势: 支持无限级列表展开 基于一个recyclerView实现 可以自定义每一级item的样式,定制化更强 2.设计的思路 数据结构List<ItemBean>,ItemBean类中有变量List<...

WelliJohn
29分钟前
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部