文档章节

javascript学习(二)

eatnothing
 eatnothing
发布于 2016/10/09 17:30
字数 1170
阅读 6
收藏 0

javascript定义属性

    var person = {
        'name' : 'micolas'
    };
        //console.log( "name" in person);
        //删除一个属性
        //delete person.name;
        //删除后为Undefined
        //console.log(person.name);
        //propertyIsEnumerable 检查属性是否是可枚举的
        console.log(person.propertyIsEnumerable("name"));
        
        var person1 = {
            _name : "Nicholas",
            get name(){
                console.log("name");
                return this._name;
            },
            set name(value){
            console.log("setting to %s",value);
            this._name = value;
            }
        }
        person1.name = "jack";
        console.log(person1);

数据的属性特征:

有两个属性特征,是数据和访问器属性都具有的,一个是[Enumerable]决定了你是否可以遍历该属性,另一个是[Configurable]决定了你的属性是否可以配置如果你想改变属性特征,可以使用Object.defineProperty()方法,该方法接收三个参数。例:将一个对象变成不可枚举且不可配置

    var person2 = {
        name : 'Nicolas'
    };
    Object.defineProperty(person2,"name",{
       enumerable : false
    });
    console.log("name" in person2);
    console.log(person2.propertyIsEnumerable('name'));
    var properties = Object.keys(person2);
    console.log(properties.length);
    //设置为不可配置
    Object.defineProperty(person2,"name",{
        configurable:false
    });
    delete person2.name;
    console.log("name" in person2);
    console.log(person2.name);
    //error 报错无法讲一个不可配置的的属性变成可配置的
     Object.defineProperty(person2,"name",{
        configurable:true
    });

    var person = {
        name:"nicolas"
    }
    console.log(person);
    //上述指定方式等同于下列方法    
    var person1 = {};
    Object.defineProperty(person1,"name",{
       value : 'nicolas',
       enumerable:true,
       configurable:true,
       writable:true    
    }); 
    //因为显示指定了该对象的name属性为可配置,所以可以更改对象的属性
    person1.name='nike';
    console.log(person1);
    //如果你在使用Object.defineProperty的时候没有显式指定,那么布尔型的特征会被默认设置为false
    //例如
    var person2 = {};
    Object.defineProperty(person2,"name",{
       value : 'mike'                   
    });    
    console.log(person2);
    person2.name = 'nike';
    //因为没有现实指定,因此无法更改person2的name属性
    //在'use strict'(严格)模式下会抛出错误(read only)  
    console.log(person2);
        
    var person3 = {
        _name : 'nn',
        get name(){
            console.log('reading name');
            return this._name;
        },
        set name(value){
            this._name = value;
        }
    };
    //当调用 person3.name 属性的时候默认调用get方法 (person3.name)
    //等同于下列方法
    var person4 = {
        _name : 'qq'
    }; 
    Object.defineProperty(person4,"name",{
        get:function(){
            console.log("Reading name");
        },
        set:function(value){
            console.log("setting name %s",value);
        },
        enumerable:true,
        configurable:true
    });
    person4.name;
    person4.name = 'fuck';

定义多重属性:

  //定义多重属性,如果使用Object.defineProperties()而不是 		    Object.defineProperty()
  //可以为一个对象定义多个属性
  var per = {};
  Object.defineProperties(per,{
  _name :{
  value        :'nico',
  enumerable   : true,
  configurable : true,
  writable     : true
    },
  //access 访问属性      
  name :{
    get:function(){
      return this._name;
  },
  set:function(value){
      this._name = value;
  },
  enumerable:true,
  configurable:true
   } 
 });   
per.name = '1234567';
console.log(per.name);  

获取属性特征:

//获取属性特征
var po = {
name : 'niconiconi',    
};
//在Javascript中可以使用Object.getOwnPropertyDescriptor(po,"name");接受两个属性
//对象&属性名    
var descriptor = Object.getOwnPropertyDescriptor(po,"name");
console.log(descriptor);

禁止修改对象:

    var person1 = {
        name : "nicolas"
    }
    console.log(Object.isExtensible(person1));
    Object.preventExtensions(person1);
     //设置禁止扩展,可修改存在的属性,可以删除属性,不可添加新的属性
    console.log(Object.isExtensible(person1)); 
        delete person1.name;
        person1.name = 'nico';
        person1.sex = 'male';
        console.log(person1);
    //对象封印
    var person2 = {
        name : 'sigi'
    }
    //不可添加删除属性,可以修改属性
    Object.seal(person2); 
    person2.name = 'nico';
    person2.sex = 'male';
    delete person2.name;
    console.log(person2);
    //对象冻结
    var person3 = {
        name : 'sss'
    }
    Object.freeze(person3);
    //不可添加删除修改属性
    person3.name = 'qq';
    person3.sex = 'male';
    delete person3.name;
    console.log(person3);    

构造函数和函数原型对象

由于javascript缺乏类,它用构造函数和原型对象来给对象带来类似的功能

    function Person(name){
              this.name = name;
              this.sayName = function(){
                  console.log(this.name);
              }
          }
        var per = new Person('nicolas');
            console.log(per);
            per.sayName();
            //与上述方式相同
    function Person(name){
        Object.defineProperty(this,"name",{
           get:function(){
               return name;
           },set:function(newName){
               name   =  newName;
           },
            enumerable:true,
            configurable:true,
        });
        this.sayName = function(){
            console.log(this.name);
        }
    } 
//当person 不是被new 调用的时候,构造函数中的this对象等于全局this对象
    var person1 = new Person('qq');        
    person1.sayName();  

大部分javascript引擎在所有对象上都支持一个名为__proto__的属性,该属性可以直接读写[prototype]

当读取一个对象的属性的时候,javascript引擎首先在对象的自有属性中查找属性的名字。如果找到则返回,如果自有属性中不包含该名字,则javascript会搜索[prototype]中的对象.

        var object = {};
		console.log(object.toString());
        object.toString = function(){
            return '外部自定义';
        }
        console.log(object.toString());
        //删除自定义的方法
        delete object.toString;
        console.log(object.toString());
        //删除原有方法(删除失败,delete只能删除自有属性)
        delete object.toString;
        console.log(object.toString());
        
        function Person(name){
            this.name = name;
        }
        //在原型上定义方法&数组
        Person.prototype.sayName = function(){
            console.log(this.name);
        }
        var person1 = new Person('jack');
        person1.sayName();
        
        function people(name){
            this.name = name;
        }
        people.prototype.sayName  = function(){
            console.log(this.name);
        }
        people.prototype.favorites = [];
        var people1 = new people('nicolas');
        var people2 = new people('gg');
        
        people1.favorites.push('pizza');
        people2.favorites.push('apple');
        console.log(people1.favorites);

当在一个对象上使用object.seal()或者object.freeze(),完全是在操作对象的自有属性,无法添加或者修改自有属性,但是可以在原型上添加属性来扩展这些对象实例

        function person(name){
             this.name = name;
         }
        var person1 = new person('nico');
        Object.freeze(person1);
        person.prototype.sayHi = function(){
            console.log('hi');
        }
        person1.sayHi();

内建对象的原型对象

//计算数组的和

        Array.prototype.sum = function(){
            return this.reduce(function(pre,cur){
               return pre+cur; 
            });
        }
        var numbers = [1,2,3,4,5];
        var result = numbers.sum(numbers);
        console.log(result);
        
        //将首字母大写
        String.prototype.cap = function(){
            return this.charAt(0).toUpperCase()+ this.substring(1);
        }
        var message = 'hello world';
        console.log(message.cap(message));

© 著作权归作者所有

上一篇: Mac安装vagrant
下一篇: JavaScript学习(一)
eatnothing
粉丝 39
博文 128
码字总数 68736
作品 0
昌平
程序员
私信 提问
第一章—JavaScript简介

一.①DOM:Document Object Model文件对象模型 ②AJAX:Asynchronous Javascript And XML异步Javascript和XML ③CSS,Cascading Style Sheets,级联样式表 ④ECMAScript(European Computer......

湖心亭看雪
2014/10/21
12
0
好程序员web前端分享菜鸟Vue学习笔记(二)

好程序员web前端分享菜鸟Vue学习笔记(二),今天天气不错,心情也不错,最近学习Vue越来越顺利了,今天接着学习,接着记录。 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中...

好程序员IT
05/09
30
0
javascript的几种声明的位置

当我们在网页设计使用到javascript的时候,都会在html里对js进行一个声明,以便我们能够使用js来对网页的“行为”进行控制。对于刚开始学习js时可能会像我一样纠结过...js都可以放在哪里? ...

无贝赛马
2014/01/26
88
0
用js来实现那些数据结构及算法—目录

  首先,有一点要声明,下面所有文章的所有内容的代码,都不是我一个人独立完成的,它们来自于一本叫做《学习JavaScript数据结构和算法》(第二版),人民邮电出版社出版的这本书。github代...

zaking
2018/05/10
0
0
semantic ui使用问题

@二的基本算合格 你好,想跟你请教个问题:最近在学习semantic ui,它里面有一些自带动画效果,为什么我用到自己的网页上却没有起作用呢?引入了semantic.min.js和jquery.js 这两个js文件。是...

月牙儿-sky
2015/05/22
6.9K
7

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部