ES6 关于对象的扩展 - 前端喵的个人空间 - 开源中国

今天来简单说下ES6 中对象的扩展

首先回顾传统的对象表示法
let person={
    'name':'zhang',
    'age':'20',
    'play':function(){
        alert('play!')
    }
}
再来看看ES6中写法
var name='zhang';
var age=20;
var person={name,age};
console.log(person) // {name: "zhang", age: 20};
这是对象的属性，那么对象的方法呢
var person={
    play(){
        alert('ES6 中的play!');
    }
}
不难看出，ES6 在写法上简洁了很多。
字面量表达式
即用字面量定义一个对象的时候，可以用表达式作为对象的属性名或者方法名。
看例子
var m="my";
var n="name";
var p="play";

var person={
    [ m+n ]:'zhang',
    [ m+p ](){
        return "play";
    }
};
console.log(person.myname)// zhang

console.log(person.myplay)// play
上面person对象的定义，其中属性名和方法名都是用中括号[]，里面是字符串相加的表达式，
所以说用字面量(即大括号{})定义对象的时候，属性名和方法名可以是一个表达式，表达式的运算结果就是属性名或者方法名。
还有一些对象新增的函数
(1)Object.is()
函数的作用：比较俩个值是否严格相等，也可以说全等。
这里再扩展下严格相等和抽象相等
代码说话：
var str='20';
var age=20;

// 抽象相等
str == age  // true

// 严格相等

str === age // false
可以看出 == 和 === 的区别，严格情况下，不仅值相等，类型也必须相等，否则会返回 false
回到我们的函数，它的作用和严格一样
var str='20';
var mine=20;
var her=20;

Object.is(str,mine) // false

Object.is(mine,her) // true
(2)Object.assign()
函数作用：将源对象的属性赋值到目标对象上。
太官方，老样子，看代码
// 可看做目标对象
let target={'a':1};
// 可看做源对象
let origin={"b":2,"c":3};

Object.assign(target,origin);

console.log(target);// {a: 1, b: 2, c: 3}
可以看出target 对象已经被改变。
当然，Object.assign( )函数的参数还可以是多个
// 可看做目标对象
let target={'a':1};
// 可看做源对象
let origin1={"b":2,"c":3};
let origin2={"d":4,"e":5};
Object.assign(target,origin1,origin2);

console.log(target);// {a: 1, b: 2, c: 3, d: 4, e: 5}
这里需要注意一下：
赋值过程中如果出现了相同的属性名，那么后面属性值的就会覆盖前面的。
小小总结下：利用Object.assign( )函数的功能，我们可以完成很多效果，比如：给对象添加属性和方法，克隆对象，合并多个对象，合并参数，为对象的属性指定默认值。
此外，它还可以拷贝数组:
let arr=['z'.'h','a','n','g'];
let arr2=Object.assign([],arr);

arr2.push('end');

console.log(arr2); // ['z'.'h','a','n','g','end']

console.log(arr); //['z'.'h','a','n','g']
(3)Object.getPrototypeOf()
函数作用：获取一个对象的prototype属性。
话不多说：
    function Person(){ // 自定义一个Person类（函数）   
            
    }     
    Person.prototype = {  // 函数都有一个预属性prototype对象                           
        say(){   // 给prototype对象添加一个say方法          
            console.log('hello');     
        }    
    };               
    let zhang = new Person(); // 实例化Person对象，赋值给变量zhang          
    zhang.say(); //调用类的say方法       结果：hello            
    Object.getPrototypeOf(zhang); // 获取zhang对象的prototype属性   
    // 结果：{say:function(){.....}}
有获取就有设置，那么：
(4)Object.setPrototypeOf()
function Person(){ // 自定义一个Person类（函数）   
            
}     
Person.prototype = {  // 函数都有一个预属性prototype对象                           
    say(){   // 给prototype对象添加一个say方法          
        console.log('hello');     
    }    
};               
let zhang = new Person(); // 实例化Person对象，赋值给变量zhang          
zhang.say(); //调用类的say方法       结果：hello                      
Object.setPrototypeOf(  //使用Object.setPrototypeOf    
    zhang,            
    {
        say(){console.log('hi')}  
    }
);
zhang.say();    //再次调用类的say方法    结果：hi
通过这个来修改对象prototype的内容。
可以看出修改之后我们再一次调用zhang.say( )；得到的结果是打印出hi，说明我们修改成功了。

对象的延伸就先到这儿...

原网址: 访问
创建于: 2018-10-13 16:48:04
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论