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