美文网首页
es6对象扩展

es6对象扩展

作者: 泪滴在琴上 | 来源:发表于2024-02-21 10:35 被阅读0次

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();
    //结果:名字叫旺财

相关文章

  • 2018-08-24

    ES6对象的扩展

  • es6之扩展运算符 三个点(...)

    es6之扩展运算符 三个点(...)对象的扩展运算符数组的扩展运算符总结es6之扩展运算符 三个点(…)对象的扩展...

  • ES6扩展归纳

    ES6扩展归纳 介绍ES6相比与ES5在原有对象上的扩展,包括字符串、正则、数值、函数、数组、对象等扩展,本文是阮...

  • es6的数值,函数,字符串扩展

    一、es6的数值扩展 二、es6的函数扩展 代码效果:对象解构在函数中的应用 三、es6字符串扩展 常用方法 代码...

  • es6笔记

    es6 对象扩展方法is() 全等比较Object.is(NaN,NaN) // trueassign() 对象合...

  • ES6新增特性(二)

    ES6 的内置对象扩展 Array 的扩展方法 一、Array 的扩展方法 1. 扩展运算符(展开语法) 扩展运算...

  • 【基础知识】扩展运算符...

    变量解构使用案例 数组扩展运算符 重点:对象也可以使用...哦ES6之扩展运算符-对象

  • ES6 学习(Number扩展篇)

    - Number扩展 ES6 把 parseInt() 和 parseFloat() 移植给了 Number 对象...

  • 扩展对象的功能性.md

    对象扩展 对象类别 在ES6中,对象分为下面几种叫法。 普通对象 特异对象 标准对象 内建对象 对象字面量语法拓展...

  • 对象

    对象的深拷贝 对象合并 assign() hasOwnProperty 遍历赋值 Es6,扩展运算符 Object...

网友评论

      本文标题:es6对象扩展

      本文链接:https://www.haomeiwen.com/subject/stevadtx.html