ES6对对象的拓展(2018-05-08)

对象的传统表示法

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());
   //结果:你好吗?

es6中的属性名可以有空格:

let foods = {};

foods.dessert = '蛋糕';

foods['hot drink'] = '可乐' //console.log(foods)

创建新对象Object.create()

    Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。

let breakfast = {

    getDrink() {

        return'咖啡';

    }

};

let dinner = {

    getDrink() {

        return'牛奶';

    }

};

let sunday = Object.create(breakfast);

console.log(sunday.getDrink())

Object.is( )函数

    方括号中还可以用变量的形式引入:ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。 JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。

    ES6 提出 “Same-value equality” (同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符( === )的行为基本一致,Object.is()括号中放的是对比的两个值。

+0 === -0//true
NaN === NaN// false
Object.is(+0, -0)// false
Object.is(NaN, NaN)// true

Object.assign()函数

    把一个对象的值复制到另一个对象里,Object.assign()方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

    Object.assign(target, ...sources)

参数
  target
  目标对象。

  sources
  (多个)源对象。

返回值

  目标对象。

  如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

let breakfast = {drink: '咖啡'},
    foods = {drink: '蛋糕'};

Object.assign(
    breakfast,
    foods
)

console.log(breakfast) //{drink: "蛋糕"}

    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}

Object.getPrototypeOf( )函数

    函数作用:获取一个对象的prototype属性。这里的对象我们用一个自定义类实例出来的对象来演示。(这里涉及到了javascript的面向对象,后面拓展)

//自定义一个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()函数 (现在这个方法只是草案 推荐用__proto__)

    设置一个对象的prototype属性。

    Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或null。

let breakfast = {

    getDrink() {

        return '咖啡';

    }

};

let dinner = {

    getDrink() {

        return '牛奶';

    }

};

let sunday = Object.create(breakfast);

console.log(sunday.getDrink());

console.log(Object.getPrototypeOf(sunday) === breakfast); // 判断原型是否相同

Object.setPrototypeOf(sunday, dinner);

console.log(sunday.getDrink())

__proto__

let breakfast = {

    getDrink() {

        return'咖啡';

    }

};

let dinner = {

    getDrink() {

        return'牛奶';

    }

};

let sunday = {

    __proto__: breakfast

}

console.log(sunday.getDrink());

console.log(Object.getPrototypeOf(sunday) === breakfast);

sunday.__proto__ = dinner;

console.log(sunday.getDrink());

console.log(Object.getPrototypeOf(sunday) === dinner);

super (得到方法返回的内容)

    super 关键字用于调用一个对象的父对象上的函数。

let breakfast = {

    getDrink() {

        return'咖啡';

    }

};

let dinner = {

    getDrink() {

        return'牛奶';

    }

};

let sunday = {

    __proto__: breakfast,

    getDrink() {

        return'返回了 ' + super.getDrink();

    }

}

console.log(sunday.getDrink())

迭代器 Iterators (轮流交换)

    Iterator 函数返回一个对象,它实现了遗留的迭代协议,并且迭代了一个对象的可枚举属性。

function chef(foods) {

    let i = 0;

    return {

        next() {

            let done = (i >=foods.length);

            let value = !done ? foods[i++] : undefined;

            return {

                value: value,

                done: done

            }

        }

    }

}

let yang =chef(['西红柿', '鸡蛋']);

console.log(yang.next());

console.log(yang.next());

console.log(yang.next());

迭代生成器 Generators   

function* chef(){ 
 yield '西红柿'; yield '鸡蛋'; 
}  
let yang = chef();   
console.log(yang.next());

    还可以以数组的形式传入

function* chef(foods){ for (let i = 0; i<foods.length; i++){
    yield foods[i];
 }

 let yang = chef(['西红柿', '鸡蛋']);
 console.log(yang.next());

Classes 类

ECMAScript 2015 中引入的 JavaScript主要是 JavaScript 现有的基于原型的继承的语法糖。 类语法不是向JavaScript引入一个新的面向对象的继承模型。JavaScript类提供了一个更简单和更清晰的语法来创建对象并处理继承。

 类实际上是个“特殊的函数”,就像你能够定义的函数表达式函数声明一样,类语法有两个组成部分:类表达式类声明

定义一个类的一种方法是使用一个类声明。要声明一个类,你可以使用带有class关键字的类名(这里是“Rectangle”)。

class Rectangle {

  constructor(height, width) {

    this.height = height;

    this.width = width;

  }

}

提升

函数声明和类声明之间的一个重要区别是函数声明会声明提升,类声明不会。你首先需要声明你的类,然后访问它,否则像下面的代码会抛出一个ReferenceError

let p =new Rectangle();
 // ReferenceError
class Rectangle {}

声明实例使用类

class Chef {

    constructor(food) {

        this.food = food;

    }

    cook() {

        console.log(this.food)

    }

}

let yang =newChef('番茄');

yang.cook();

类中的 get (得到东西的方法)与 set(设置东西的方法)

class Chef {

    constructor(food) {

        this.food = food;

        this.dish = [];

    }

    get menu() {

        return this.dish;

    }

    set menu(dish) {

        this.dish.push(dish);

    }

    cook() {

        console.log(this.food)

    }

}

let yang = new Chef();

console.log(yang.menu = '番茄');

console.log(yang.menu = '鸡蛋');

console.log(yang.menu)


javascript的面向对象

    Javascript本身不是一种面向对象的编程语言,在ES5中,它的语法中也没有class(类的关键字),但是,开发者可以利用对象的原型prototype属性来模拟面向对象进行编程开发。

//构造函数模拟创建一个Dog类

   function Dog(name){

        this.name = name;

    }

   //把一些属性和方法,定义在prototype对象上

   Dog.prototype = {

    "type":"动物",

    "say":function(){

        alert(

            "名字叫"+this.name);

        }

    };

   //实例化

   var dog = new Dog('旺财');

   //调用say方法

   dog.say();

   //结果:名字叫旺财

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

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

推荐阅读更多精彩内容