对象理解原型链
来源:互联网 发布:电钢琴教学软件 编辑:程序博客网 时间:2024/05/01 02:44
概述
对象中包含一系列的属性,这些属性无序。每个属性都有一个key和对应的value。
var obj = {x:1,y:2};obj.x;//1obj.y;//2
对象的数据类型有:Function、Array、Date ···
对象结构
var obj = {};obj.y = 2;obj.x = 1;function foo(){}foo.prototype.z = 3;var obj =new foo();
一、对象的创建
第一种方式:字面量
var obj1 = {x : 1, y : 2};var obj2 = { x : 1, y : 2, o : { z : 3, n : 4 }};
第二种方式:new/原型链
function foo(){}; //这样就默认带有一个foo.prototype对象属性foo.prototype.z = 3;var obj =new foo();obj.y = 2;obj.x = 1;obj.x; // 1obj.y; // 2obj.z; // 3typeof obj.toString; // 'function''z' in obj; // trueobj.hasOwnProperty('z'); // falseobj.z = 5;obj.hasOwnProperty('z'); // truefoo.prototype.z; // still 3obj.z; // 5obj.z = undefined;obj.z; // undefineddelete obj.z; // trueobj.z; // 3delete obj.z; // trueobj.z; // still 3!!!
第三种方式:Object.create
var obj = Object.create({x : 1});obj.x // 1typeof obj.toString // "function"obj.hasOwnProperty('x');// false
var obj = Object.create(null);obj.toString // undefined
二、属性的操作
属性读写
var obj = {x : 1, y : 2};obj.x; // 1obj["y"]; // 2
var obj = {x1 : 1, x2 : 2};var i = 1, n = 2;for (; i <= n; i++) { console.log(obj['x' + i]);}// 输出: 1, 2
var p;for (p in obj) { console.log(obj[p]);}//for-in有可能将原型链上面的属性遍历下来
属性异常
var obj = {x : 1};obj.y; // undefinedvar yz = obj.y.z; // TypeError: Cannot read property 'z' of undefinedobj.y.z = 2; // TypeError: Cannot set property 'z' of undefinedvar yz;if (obj && obj.y && obj.y.z) { yz = obj.y.z;}//或者如下巧用操作符var yz = obj && obj.y && obj.y.z;
属性删除
var person = {age : 28, title : 'fe'};delete person.age; // truedelete person['title']; // trueperson.age; // undefineddelete person.age; // true 只是表示不存在这个属性了,不表示删除成功delete Object.prototype; // false,var descriptor = Object.getOwnPropertyDescriptor(Object, 'prototype');descriptor.configurable; // false 是否可配置,false表示不可配置
var globalVal = 1;delete globalVal; // falsefunction fd() {}delete fd; // false//隐式创建的变量可以删除ohNo = 1;window.ohNo; // 1delete ohNo; // true
属性检测
var cat = new Object;cat.legs = 4;cat.name = "Kitty";'legs' in cat; // true'abc' in cat; // false"toString" in cat; // true, inherited property!!!cat.hasOwnProperty('legs'); // truecat.hasOwnProperty('toString'); // false//查看属性是不是可枚举的呢?cat.propertyIsEnumerable('legs'); // truecat.propertyIsEnumerable('toString'); // false
//cat对象的price属性自己定义是否可枚举,以下方式不写默认为falseObject.defineProperty(cat, 'price', {enumerable : false, value : 1000});cat.propertyIsEnumerable('price'); // falsecat.hasOwnProperty('price'); // trueif (cat.legs != undefined) { //不等于表示 !== undefined, or, !== null}
属性枚举
var o = {x : 1, y : 2, z : 3};'toString' in o; // trueo.propertyIsEnumerable('toString'); // falsevar key;for (key in o) { console.log(key); // x, y, z console.log(o.key);//1,2,3 console.log(0[key]);//1,2,3}
var obj = Object.create(o);obj.a = 4;var key;for (key in obj) { console.log(key); // a, x, y, z}var obj = Object.create(o);obj.a = 4;var key;for (key in obj) { //过滤掉原型链上的属性 if (obj.hasOwnProperty(key)) { console.log(key); // a }}
getter/setter方法
var man = { name : 'Bosn', weibo : '@Bosn', get age() { return new Date().getFullYear() - 1988; }, set age(val) { console.log('Age can\'t be set to ' + val); }}console.log(man.age); // 27man.age = 100; // Age can't be set to 100console.log(man.age); // still 27
接下来将上面的代码再复杂点:
var man = { weibo : '@Bosn', $age : null, get age() { if (this.$age == undefined) { return new Date().getFullYear() - 1988; } else { return this.$age; } }, set age(val) { val = +val;//将传入的字符串转化为Number类型(val-0也可以实现) if (!isNaN(val) && val > 0 && val < 150) { this.$age = +val; } else { throw new Error('Incorrect val = ' + val); } }}
get/set遇到原型链
function foo() {}Object.defineProperty(foo.prototype, 'z', {get : function(){return 1;}});var obj = new foo();obj.z; // 1obj.z = 100;//先前可以在obj中创建属性为z值为100obj.z; // still 1Object.defineProperty(obj, 'z', {value : 100, configurable: true});obj.z; // 100;delete obj.z;obj.z; // back to 1
var o = {};Object.defineProperty(o, 'x', {value : 1}); // writable=false, configurable=falsevar obj = Object.create(o);//obj类似于理解为一个o的指向obj.x; // 1obj.x = 200;//writable=false为不可写所以赋值无效obj.x; // still 1, can't change it//用Object.definProperty();方式来定义属性,并赋值Object.defineProperty(obj, 'x', {writable:true, configurable:true, value : 100});obj.x; // 100obj.x = 500;obj.x; // 500
三、属性的权限
Object.getOwnPropertyDescriptor({pro : true}, 'pro');//{pro : true}是对象,'pro'为属性// Object {value: true, writable: true, enumerable: true, configurable: true}Object.getOwnPropertyDescriptor({pro : true}, 'a'); // undefinedvar person = {};Object.defineProperty(person, 'name', { configurable : false, writable : false, enumerable : true, value : "Bosn Ma"});person.name; // Bosn Maperson.name = 1;person.name; // still Bosn Madelete person.name; // false
Object.defineProperties(person, { title : {value : 'fe', enumerable : true}, corp : {value : 'BABA', enumerable : true}, salary : {value : 50000, enumerable : true, writable : true}, luck : { get : function() { return Math.random() > 0.5 ? 'good' : 'bad'; } }, promote : { set : function (level) { this.salary *= 1 + level * 0.1; } }});Object.getOwnPropertyDescriptor(person, 'salary');// Object {value: 50000, writable: true, enumerable: true, configurable: false}Object.getOwnPropertyDescriptor(person, 'corp');// Object {value: "BABA", writable: false, enumerable: true, configurable: false}person.salary; // 50000person.promote = 2;person.salary; // 60000
五、对象标签
proto
class标签
var toString = Object.prototype.toString;function getType(o){return toString.call(o).slice(8,-1);};toString.call(null); // "[object Null]"getType(null); // "Null"getType(undefined); // "Undefined"getType(1); // "Number"getType(new Number(1)); // "Number"typeof new Number(1); // "object"getType(true); // "Boolean"getType(new Boolean(true)); // "Boolean"
extensible标签
var obj = {x : 1, y : 2};Object.isExtensible(obj); // trueObject.preventExtensions(obj);Object.isExtensible(obj); // falseobj.z = 1;obj.z; // undefined, add new property failedObject.getOwnPropertyDescriptor(obj, 'x');// Object {value: 1, writable: true, enumerable: true, configurable: true}Object.seal(obj);//隐藏Object.getOwnPropertyDescriptor(obj, 'x');// Object {value: 1, writable: true, enumerable: true, configurable: false}Object.isSealed(obj); // trueObject.freeze(obj);//冻结Object.getOwnPropertyDescriptor(obj, 'x');// Object {value: 1, writable: false, enumerable: true, configurable: false}Object.isFrozen(obj); // true// [caution] not affects prototype chain!!!
序列化
var obj = {x : 1, y : true, z : [1, 2, 3], nullVal : null};JSON.stringify(obj); // "{"x":1,"y":true,"z":[1,2,3],"nullVal":null}"obj = {val : undefined, a : NaN, b : Infinity, c : new Date()};JSON.stringify(obj); // "{"a":null,"b":null,"c":"2015-01-20T14:15:43.910Z"}"obj = JSON.parse('{"x" : 1}');obj.x; // 1
自定义序列化
var obj = { x : 1, y : 2, o : { o1 : 1, o2 : 2, toJSON : function () { return this.o1 + this.o2; } }};JSON.stringify(obj); // "{"x":1,"y":2,"o":3}"
其他方法
var obj = {x : 1, y : 2};obj.toString(); // "[object Object]"obj.toString = function() {return this.x + this.y};"Result " + obj; // "Result 3", by toString+obj; // 3, from toStringobj.valueOf = function() {return this.x + this.y + 100;};+obj; // 103, from valueOf"Result " + obj; // still "Result 3"
2 0
- 对象理解原型链
- 深入理解原型对象和原型链
- js的原型链和对象理解
- 关于对象原型链的理解
- js原型对象理解
- 线性理解原型对象
- 理解原型对象
- 【web前端-理解js原型】理解Javascript中的原型对象、原型链和继承
- 对象,原型,原型链
- 对象&原型对象&原型链
- JS-原型对象的理解
- JS 对象,原型的理解
- 理解原型和原型链
- 前端开发javascript原型链和对象理解
- JavaScript原型对象、原型属性、原型链
- 原型对象与原型链
- 原型对象和原型链
- 原型对象与原型链
- [LeetCode] 56. Merge Intervals 解题报告
- css垂直居中的六中方法
- 体检套餐
- sort_nat
- 1051 接龙游戏
- 对象理解原型链
- Docker背后的容器管理——Libcontainer深度解析
- 【Maven】聚合和继承
- 提高篇项目3-求两个数的最大公约数
- 01字符串
- 体检套餐 关键代码
- JS 中 this上下文对象的使用方式
- 求N个值得最大值,最小值,和
- java企业网站源码,模版,有前后台,springmvcSSM,生成静态化