hanyuxinting / Blog

记录点滴
1 stars 0 forks source link

JS权威指南读书笔记-6章对象 #8

Open hanyuxinting opened 7 years ago

hanyuxinting commented 7 years ago

创建对象(三种方法)

对象直接量

var empty = {};
var point = {x:0,y:0};

最后一个对象最好不要写逗号,IE下会报错的~

new一个对象

new Array();
new Date();

Object.create()

对象、原型、原型链

Object.prototype - 对象的属性。延伸:这里查看详细的Object方法

属性查询、设置

两种方式:.运算符或者[]运算符。

. 运算符有一个问题,就是需要知道你.的属性是什么。且不能修改。 [] 可以友好的解决这个问题。

var   hash = {};
for(var i=0,len=3;i<len;i++){
hash[i] = i;
}

/*
0:0
1:1
2:2
*/
var   hash = {};
for(var i=0,len=3;i<len;i++){
hash['test'+i] = i;
}
/*
test0:0
test1:1
test2:2
*/

继承

子类可以继承父类的属性及方法。 子类中定义一个属性,如果父类中有,则子类新定义的值会覆盖父类的值(但是父类的值并不会改变。只是子类的值做了修改,如果不给子类的值重定义值的话,子类的值会是父类的值。)

访问错误时

不是所有的访问都报错。注意,有些属性是只读,你给它赋值,他竟然还不报错。比如:Object.prototype。——请用严格模式。(不过干嘛要给这个只读的赋值呢,有什么场景用到?)

题外:了解只读属性。

删除属性-delete

继承的属性是没法删掉的,就是它不能对它的父类里的属性和方法删除。 只能删自己的。

检测属性

in hasOwnProperty propertyIsEnumerable()

var o = {x: 1};
undefined
"x" in o
true
o.hasOwnProperty('x')
true
o.propertyIsEnumerable('x')
true
'toString' in o
true
o.hasOwnProperty('toString')
false
o.propertyIsEnumerable('toString')
false

一个简写:

o.x !== undefined
true

但是,如果 o.x 的值是 undefined 呢!所以,大胆使用 in 吧。

枚举

过滤非自身的属性和方法,很有用!

for(p in o){
if(!o.hasOwnProperty(p)) continue;
}

for(p in o){
if(typeof o[p] === 'function') continue;
}

这几个有趣有用的代码片段:

第六章下

getter setter

getter:有时候希望访问属性时能返回一个动态计算后的值, 或希望不通过使用明确的方法调用而显示内部变量的状态。在JavaScript中, 能通过使用 getter 实现. 尽管可能结合使用getter和setter创建一个伪属性,但不能既使用getter绑定到一个属性上,同时又用该属性真实的存储一个值.

var log = ['test'];
var obj = {
  get latest () {
    if (log.length == 0) return undefined;
    return log[log.length - 1]
  }
}
console.log (obj.latest); // test

delete 删除 getter

delete obj.latest;

在一个已经存在的对象上动态定义getter

var o = { a:0 }
Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
console.log(o.b);//1

还可以使用计算后的属性名。

var expr = "foo";
var obj = {
  get [expr]() { return "bar"; }
};
console.log(obj.foo); // "bar"

setter : In JavaScript, a setter can be used to execute a function whenever a specified property is attempted to be changed. Setters are most often used in conjunction with getters to create a type of pseudo-property. It is not possible to simultaneously have a setter on a property that holds an actual value.

var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
console.log(language.log); // ['EN']

language.current = 'FA';
console.log(language.log); // ['EN', 'FA']

写一个测试getter和setter的例子

function testSetterAndGetter(){
    var language = {
        set current(name){
            this.log.push(name);
        },
        get current(){
            return this.log;
        },
        log: []
    };

    language.current = 'EN'; // 一个伪属性
    console.log(language.log);
    console.log(language.current);

    delete language.current;

    Object.defineProperty(language, 'bridge', {
        set: function(x){
            this.log.push(x);
        },
        get: function(){
            return this.log;
        }
    });

    language.current = 'china';
    language.bridge = 'bridge';

    console.log(language.log);
    console.log(language.current);
    console.log(language.bridge);
}

["EN"]
["EN"]
["EN", "bridge"]
china
["EN", "bridge"]

属性的特性

属性的获取、赋值、定义等方法。

对象的三个属性

原型属性 isPrototypeOf() instanceof() 一个查原型一个查实例。

类属性 toString()

引申:call、apply方法

可扩展性 isExtensible() preventExtensions() freeze() isFrozen() seal() isSealed()

有一个问题:

/*
 * 该测试用例适用于这些方法。重置对象变量后,不再起作用。
 * isExtensible()
 * preventExtensions()
 * freeze()
 * isFrozen()
 * seal()
 * isSealed()
*/
function testExtensible(){
    var o = {
        a: 1
    };

    Object.preventExtensions(o);
    Object.isExtensible(o); // false

    o = {
        b: 4
    };

    Object.isExtensible(o); // true
    console.log(o.b); // 4
    Object.preventExtensions(o);
    o.bb = 44;
    console.log(o); // {b:4}

}

序列化对象-JSON-JavaScript Object Notation JS对象表示法

数据交换格式。

JSON.stringify() JSON.parse()

对象方法

toJSON。 valueOf() 类似 toString()。JS需要将对象转换为某种原始值而非字符串时调用,尤其是转换为数字时。

具体的valueOf的例子