2017百度前端技术学院——vue源码分析之——动态数据绑定一

一、Object.keys()

Object.keys()方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用(for in)循环遍历该对象时返回的顺序一致 (顺序一致不包括数字属性)（两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性）。

let obj = {
    name:'dailu',
    age:123,
    sex:"female"
}
console.log(Object.keys(obj)); //["name", "age", "sex"]

var arr = ["a","b","c"];
console.log(Object.keys(arr)); //["0", "1", "2"]

// 类数组对象
var obj1 = {0:"a",1:"b",2:"c"}
console.log(Object.keys(obj1)); //["0", "1", "2"]

二、Object.defineProperty()

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象.
语法：
Object.defineProperty(obj,prop,descriptor)

概念:

ECMAScript中有两种属性：数据属性和访问器属性

1. 数据属性

属性特性用[[]]括起来，js中不能直接访问他们，这些特性是为了实现JavaScript引擎用的。

数据属性有4个描述行为的特性:

• [[configurable]]:表示能否能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。
• [[Enumerable]]:当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中
• [[Writable]]:表示能否修改属性的值
• [[Value]]:表示属性的值。

注：直接在对象上定义的属性的前三个特性的默认值是true。

通过Object.defineProperty()定义属性或者修改原有属性。

例如：

var obj = {}
Object.defineProperty(obj,"name",{
    configurable:false,
    writable:false,
    enumerable:true,
    value:'elva'
})
console.log(obj.name); //elva
delete obj.name
console.log(obj.name); //elva
obj.name = 'haha'
console.log(obj.name);//elva
for(var key in obj){
    console.log(key) //name
}

如果configurable设置成false,，那么除了 writable 外，其他特性都不能被修改,如果尝试修改 （除 writable 以外），将会产生一个TypeError异常，除非当前值与修改值相同。

var obj = {}
Object.defineProperty(obj,"name",{
    configurable:false,
    writable:false,
    enumerable:true,
    value:'elva'
})
/*
Object.defineProperty(obj,"name",{
    enumerable:false // Uncaught TypeError: Cannot redefine property: name
})
*/
Object.defineProperty(obj,"name",{
    enumerable:true // 成功不报异常
})

注：如果一个属性的 configurable 为 false，则其 writable 特性也只能修改为 false。

var obj = {}
Object.defineProperty(obj,"name",{
    configurable:false,
    writable:false,
    enumerable:true,
    value:'elva'
})
//再次调用Object.defineProperty()
Object.defineProperty(obj,"name",{

    // 通过Object.defineProperty设置的属性的confugurable特性值默认是false,因此第二次调用Object.defineProperty属性不会报错

    writable:true //  Uncaught TypeError: Cannot redefine property: name
})

2、访问器属性：

• [[configurable]]:表示能否能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。
• [[Enumerable]]:当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中
• [[get]]:在读取属性值时调用的函数，默认值为undefined。
• [[]set]:在写入属性时调用的函数，默认值为undefined。

注:访问器属性不能直接定义，必须使用Object.defineProperty()定义

例如:

var book = {
    _year:2004,
    edition:1
}
Object.defineProperty(book,"year",{
    get:function (){
        return this._year
    },
    set:function (val){
        if(val>2004){
            this.edition +=val-2004
        }
    }
})
book.year = 2005
console.log(book.edition); // 2
_year:表示只能通过访问器属性访问

3、定义多个属性Object.defineProperties()

例如:

var book ={}
Object.defineProperties(book,{
    _year:{
        configurable:true,
        enumerable:true,
        writable:true,
        value:2004
    },
    edition:{
        configurable:true,
        enumerable:true,
        writable:true,
        value:1
    },
    year:{
        enumerable:true,
        get:function (){
            return this._year
        },
        set:function (val){
            if(val>2004){
                this.edition += val-2004
            }
        }
    }
})
console.log(book._year); //2004
book._year = 2005
console.log(book.edition);// 1
console.log(book.year); // 2005

console.log(book._year); // 2005
book.year = 2005
console.log(book.edition); //2
console.log(book.year);//2005

总结：数据属性和访问器属性都有[[configurable]]和[[enumarable]],[[writable]]和[[value]]只能在数据属性中使用，[[get]]和[[set]]只能在访问器属性中使用。

任务目的

• 了解 getter 和 setter
• 了解 new
• 任务描述

这是“动态数据绑定”系列的第一题。

动态数据绑定就是 Vue 最为基础，最为有用的一个功能。这个系列将分成5部分，一步一步来理解和实现这一功能。
ok，我们从最简单的开始。给定任意一个对象，如何监听其属性的读取与变化？也就是说，如何知道程序访问了对象的哪个属性，又改变了哪个属性？ 举个例子。

let app1 = new Observer({
  name: 'youngwind',
  age: 25
});

let app2 = new Observer({
  university: 'bupt',
  major: 'computer'
});

// 要实现的结果如下：
app1.data.name // 你访问了 name
app1.data.age = 100;  // 你设置了 age，新的值为100
app2.data.university // 你访问了 university
app2.data.major = 'science'  // 你设置了 major，新的值为 science

请实现这样的一个 Observer，要求如下：

• 传入参数只考虑对象，不考虑数组。
• new Observer返回一个对象，其 data 属性要能够访问到传递进去的对象。
• 通过 data 访问属性和设置属性的时候，均能打印出右侧对应的信息。

任务注意事项

• 不能使用任何第三方的库
• 程序执行环境为浏览器

效果展示
源码地址

代码展示：

function Observer(data){
    this.data = data;
    this.walk(data)
}

var p = Observer.prototype;

// 遍历
p.walk = function (obj){
    var val,
        _this = this;
    Object.keys(obj).forEach(function (key){
        val = obj[key]
        if(typeof val==="object"){
            new Observer(val)
        }
        _this.convert(key,val)
    })
}

// 绑定getter 和setter
p.convert = function (key,val){
    Object.defineProperty(this.data,key,{
        configurable:true,
        enumarable:true,
        get:function (){
            console.log("你访问了"+key);
            return val
        },
        set:function (newVal){
            console.log("你设置了"+key);
            console.log("新的"+key+"="+newVal);

            // 如果设置的新值是一个对象，则递归它，加上set/get
            if(typeof newVal ==="object"){
                new Observer(newVal);
            }

            val = newVal
        }
    })
}

let data = {
    user: {
        name: "hello world",
        age: "24"
    },
    address: {
        city: "beijing"
    }
};
var app = new Observer(data);
console.log(app.data.user);