es6对象扩展

ES6给我们带来的新特性包括:简洁的表示法、属性名方法可以是表达式、Object.is( ) 函数、Object.assgin( ) 函数、Object.setPrototypeOf( ) 函数,Object.getPrototypeOf() 函数;此外还拓展了:严格相等和抽象相等的区别、javascript面向对象的实现。

对象的传统标识

let person = {
        "name":"张三",
        "say":function(){
            alert("你好吗?");
        }
    }

ES6的简洁写法

 var name = "Zhangsan";
    var age = 12;

    //传统的属性写法
    var person = {
        "name":name,
        "age":age
    };
    console.log(person);
    //结果:{name: "Zhangsan", age: 12}


    //ES6的属性写法
    var person = {name,age};
    console.log(person);
    //结果:{name: "Zhangsan", age: 12}
 //传统的表示法
    var person = {
        say:function(){
            alert('这是传统的表示法');
        }
    };

    //ES6的表示法
    var person = {
        say(){
            alert('这是ES6的表示法');
        }
    };

属性名可以是表达式

 var f = "first";
    var n = "Name";
    var s = "say";
    var h = "Hello";

    var person = {
        [ f+n ] : "Zhang",
        [ s+h ](){
            return "你好吗?";
        }
    };
    console.log(person.firstName);
    //结果:Zhang
    console.log(person.sayHello());
    //结果:你好吗?

Object.assign()函数

函数作用:将源对象的属性赋值到目标对象上

//这个充当目标对象
    let target = {"a":1};
    //这个充当源对象
    let origin = {"b":2,"c":3};
    Object.assign(target,origin);
    //打印target对象出来看一下
    console.log(target);
    //结果 {a: 1, b: 2, c: 3}

注意输出的结果,target对象已经不是{ a:1 }了,而是变成了{a: 1, b: 2, c: 3},经过Object.assign( )函数的处理,源对象的属性被添加到了target对象上。这就是Object.assign( )函数的作用。
Object.assign( )函数的参数还可以是多个(至少是两个)。我们在上面的案例稍做修改,加一个参数:

//这个充当目标对象
    let target = {"a":1};
    //这个充当源对象
    let origin1 = {"b":2,"c":3};
    //这个充当源对象
    let origin2 = {"d":4,"e":5};
    Object.assign(target,origin1,origin2);
    //打印target对象出来看一下
    console.log(target);
    //结果 {a: 1, b: 2, c: 3, d: 4, e: 5}

如果赋值过程中,对象的属性出现了相同的名字怎么办?如果这样,后面的属性值就会覆盖前面的属性值。还是上面的案例稍做修改

 //这个充当目标对象
    let target = {"a":1};
    //这个充当源对象
    let origin1 = {"a":2};
    //这个充当源对象
    let origin2 = {"a":3};
    Object.assign(target,origin1,origin2);
    //打印target对象出来看一下
    console.log(target);
    //结果 {a: 3}

巧妙利用Object.assign( )函数的功能,我们可以完成很多效果,比如:给对象添加属性和方法,克隆对象,合并多个对象,为对象的属性指定默认值。

Object.getPrototypeOf( )函数

获取一个对象的prototype属性。

//自定义一个Person类(函数)
    function Person(){
    }
    //函数都有一个预属性prototype对象
    Person.prototype = {
        //给prototype对象添加一个say方法
        say(){
            console.log('hello');
        }
    };
    //实例化Person对象,赋值给变量allen
    let allen = new Person();
    //调用类的say方法
    allen.say();
    //结果:打印出hello
    //获取allen对象的prototype属性
    Object.getPrototypeOf(allen);
    //结果:打印{say:function(){.....}}

Object.setPrototypeOf()函数

设置一个对象的prototype属性

 //自定义一个Person类(函数)
    function Person(){

    }
    //函数都有一个预属性prototype对象
    Person.prototype = {
        //给prototype对象添加一个say方法
        say(){
            console.log('hello');
        }
    };


    //实例化Person对象,赋值给变量allen
    let allen = new Person();
    //调用类的say方法
    allen.say();
    //结果:打印出hello


    //使用Object.setPrototypeOf
    Object.setPrototypeOf(
            allen,
            {say(){console.log('hi')}
    });

    //再次调用类的say方法
    allen.say();
    //结果:打印出hi

js的面向编程

模拟面向对象编程有几个关键步骤:
1、构造函数;
2、给prototype对象添加属性和方法;
3、实例化;
4、通过实例化后的对象调用类的方法或者属性。

//构造函数模拟创建一个Dog类
    function Dog(name){
        this.name = name;
    }

    //把一些属性和方法,定义在prototype对象上
    Dog.prototype = {
        "type":"动物",
        "say":function(){
            alert("名字叫"+this.name);
        }
    };

    //实例化
    var dog = new Dog('旺财');
    //调用say方法
    dog.say();
    //结果:名字叫旺财
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 前言 在JavaScript中,几乎每一个值都是某种特定的类型对象,Es6也着重提升了对象的功能性,Es6通过多种...
    秦声阅读 251评论 0 0
  • es6对于对象做了很多扩展,现做以下总结。特性: ES6 允许直接写入变量和函数,作为对象的属性和方法。 Obje...
    tiancai啊呆阅读 350评论 0 1
  • 1.属性的简介表示法 const foo ='bar' const baz = {foo} baz //{foo:...
    yfsola阅读 225评论 0 0
  • 属性的简洁表示法 如果在对象中定义方法,还可以这样简写 属性名表达式 在定义字面量对象时,ES6允许把表达式放在方...
    你的昵称已被我占用阅读 156评论 0 0
  • 声明对象时,可以只写属性名,不写属性值 增加对象属性的方法 Object.is()属性 用于比较两个值是否相等 在...
    二璇妹妹阅读 371评论 0 2