javaScript基础（对象篇)
javaScript中的面向对象编程分为以下几层
- 第一层:单一对象的面向对象
- 第二层:对象间的原型链
- 第三层: 作为实例工厂的构造函数，类似于其他语言中的类
- 第四层：子类，通过继承已有的构造函数，创建新的构造函数
JavaScript中的所以对象都是从字符串到值的映射。一个对象中的某一项（键、值）称为属性，属性的键始终是文本字符串。一个对象中的某一项（键、值）称为属性。属性的键始终是文本的字符串、属性的值可以是任何JavaScript的值，包括函数。方法是值作为函数的属性
对象字面量
--
JavaScript的对象字面量可以直接创建简单对象(Object 的直接实例)
var jane={
name: 'Jane',
describe:function(){
return 'Person named' +this.name;
},
};
获取属性
jana.name//Jane
jane.describe//[Function]
删除对象
delete 操作符允许你从一个对象中完全移除一个属性（整个键值对),删除只影响一个对象的直接（“自有的",非继承的)属性。这并不涉及它的原型，如果是自有属性，不能被删除，delete会返回false，其他所有情况都会返回true
var obj={hello:'world'};
delete obj.hello//true
obj.hello//undefined
var obj={}
Object.definedProperty(obj,'canBeDeleted',{
value:123,
configurable:true
## });
OBject.definedProperty(obj,'cannotBeDeleted',{
value:456,
configurable:false
});
delete obj.cannotBeDeleted//false
其他所有情况删除属性返回true
delete obj.doesNotExist//true
delete obj.canBeDeleted///true
特殊的键
可以使用var 和function作为属性的键，也可以使用数字作为键，但是他们会被解析为字符串
var obj={var :'a',function:'b'}
obj.var//a
obj.function//b
var obj={0.7:'abc'}
Object.key(obj)//['0.7']
obj['0.7']//'abc'
任意值转对象
| 值 | 结构 |
|---|---|
| 无参数调用 | {} |
| undefined | {} |
| null | {} |
| 布尔值 | new Boolean(bool) |
| 数字 | new Number(num) |
| 字符串 | new String(Str) |
| 对象 | new Object(obj) |
Object(null) instance Object//true
Object(false) instanceOf Boolean
var obj ={}
Object(obj)===obj//true
this作为函数和方法的隐式参数
当你调用一个函数时，this总是作为一个隐式参数
- 宽松模式中的普通函数, 尽管普通函数中的this没有实际用处，但它仍然作为一个特殊的变量存在，它的值总是指向全局对象
function returnThisSloopy(){return this}
returnThissloppy()===window//true
- 严格模式下的普通函数
this 总是undefined
function returnThisStrict(){
'use strict'; ff
return this
}
returnThisStrict()===undefined//true
- 方法,this指向调用方法的对象
var obj={method:returnthisStrict};
obj.method()===obj;
在调用函数时设置this:call(),apply()和bind()
函数也是对象，因此，每个函数都有自己的方法
- call 方法第一个参数会给被调用函数内的this，剩下的参数作为参数传入被调函数中
- apply 第一个参数是给被调函数内的this，第二个参数的个数组
- bind 展示了偏函数，=意味着它创建了一个新的函数，并用接下来的范式调用bind，this是thisValue，参数不断的作为新的参数的参数
var jane={
name:'jane',
sayHelloTo:function(otherName){
'use strict':
console.log(this.name+'says hello to'+otherName);
}
}
jane.sayHelloTo('Tarzan');
jane.sayHelloTo.call(jane,'Tarzan')
var func=jane.sayHello func.call(jane,'Tarzan');
三者等价
jane.sayHelloTo('Tarzan')
jane.sayHelloTo.apply(jane,['Tarzan'])
var func=jane.sayHelloTo;
func.apply(jane,['Tarzan']);
三者等价
jane.sayHelloTo('Tarzan')
var func1=jane.sayHelloTo.bind(jane)
func1('Tarzan');
var func2=jane.sayHelloTo.bind(jane,'Tarzan');
三者等价
提取方法时丢失this
原因在于我们把counter.inc 的值作为函数来调用，因此this是全局对象我们执行的是window.counter++，而window.count不存在，所以会是undefined
var counter={
count:0
inc:function(){
this.count++;
}
}
正确的提前方法
var func3=counter.inc.bind(counter);
嵌套函数覆盖this
var obj={
name:'Jane',
friend:['Tarzan','Cheeta'],
loop:function(){
'use strict';
this.friends.forEach(
function(friend){//1
console.log(this.name+' knows '+friend) //2
}
);
}
}
obj.loop();
//Cannot read property 'forEach' of undefined
因为1处的函数拥有自己的this，而this是undefined的
解决方案
- that ==this
that==this
loop:function(){
'use strict';
var that=this;
this.friends.forEach(
function(friend){//1
console.log(that.name+' knows '+friend) //2
}
);
}
- bind()
loop:function(){
'use strict';
var that=this;
this.friends.forEach(
function(friend){//1
console.log(that.name+' knows '+friend) //2
}.bind(this)
);
}
- forEach中的提供第二个参数this
loop:function(){
'use strict';
var that=this;
this.friends.forEach(
function(friend){//1
console.log(that.name+' knows '+friend) //2
},this);
}
三点操作符
(...)可以把数组转化为实际参数
Math.max(...[13,7,30])
原型关系
对象通过内部属性[[Prototype]]指定它的原型.每个对象都有这个属性，而它也可以是null
var proto={
describe:function(){
return 'name ：'+this.name
}
}
var obj={
[[prototype]]:proto,
name='obj'
}
使用prototype创建对象
创建原型为proto的对象
调用方法Object.create(proto,propDescObj?)
var PersonProto={
describe:function(){
return 'Person named'+this.name;
}
}
var jane=Object.create(PersonProto,{
name:{value:'Jane',writable:true}
})
通常只需创建空对象，然后手动添加属性
var jane=Object.create(PersonProto)
jane.value='Jane'
读取对象原型
Object.getPrototypeof(obj)
Object.getPrototypeof(jane)===PersonProto//true
检查对象是否是另一个对象的原型
Object.prototype.isPrototypeOf(obj)
var A={}
var B=Object.create(A)
var C=Object.create(B)
A.isPrototypeOf(C)//true
C.isPrototypeOf(A)//false
找到定义属性的对象，遍历对象obj的原型链。该函数返回为propKey的自由属性的第一个对象如果没有返回null
function getDefiningObject(obj,propKey){
obj=Object(obj)
while(obj&&!{}.hasOwnProperty.call(obj,propKey)){
obj=Object.getPrototypeof(obj)
}
return obj;
}
特殊属性protp，可以直接访问[[Prototype]]
var obj={};
obj.__proto__===Object,prototype//true
obj.__proto__Array.prototype
Object.getPrototypeOf(obj)===Array.prototype//true
删除只能删除自有属性，不能输出继承来的属性
遍历和检测属性
--
列出自有属性
Object.getOwnPropertyNames（obj)//返回obj的所有自由属性值
Object.key(obj)//返回obj的所以可枚举的属性值
getter和setter
对象字面量定义访问权
var obj={
get foo(){
return 'getter';
},
set foo(value){
console.log('setter'+value);
}
}
obj.foo='bla'//setter:bla
obj.foo//;getter/
属性描述符定义访问权
var obj=Object.create({
Object.prototype.{
foo:{
get:function(){
return 'getter';
},
set:function(){
console.log('setter'+value);
}
}
}
})
属性特性和属性描述符
- 属性特性是属性的原子构建快
- 属性描述符是一种数据结构，用于编程处理特性
属于的属性状态，包括它的数据和元数据，都储存在特性中它们是属性拥有的字段，就像对象拥有的属性。特效的键通常写在双方括号中。
- [[value]],持有属性的值
- [[Writable]],是否可以被改变
- [[Get]],读取属性时调用
- [[Set]],设置调用
- [[Enumerable]]持有布尔值。设置一个属性不可枚举，在某些操作会隐藏此属性
- [[Configurable]]，持有布尔值，如果他是false，那么你不能删除，改变属性的任何特性，也不能把他从数据属性转化为访问属性
如属性值123是只读属性
{
value:123
writable:false
enumberable:true
configurable:false
}
使用访问其，也可以实现同样的目的i
{
get:function(){return 123},
enumerable:true
configurable:false
}
通过属性描述符获取和设置属性的特性
Object.getOwnPropertyDescriptor(Object.prototype,'toString')
改变propKey的属性
Object.defineProperty(Obj,propKey,propDesc)
var obj=Object.defineProperty({},'foo',{
value:123
enumerable:true
})
批量处理
Object.defineProperties(obj,propDescObj)
var obj=Object.defineProperties({},{
foo:{value:123,enumerable:true},
bar:{value:'abc',enumerable:true}
})
保护对象
- 防止扩展
Object.preventExtensions(obj)
Object.isExtensible(obj)//检查是否可以被扩展
- 封闭
防止扩展，并设置所以属性"不可配置"
object.seal(obj)
Object.isSealed(obj)//是否是封闭的
- 冻结,
它使所有属性不可写，且封闭obj
Object.freeze(obj)
Object.isFrozen(obj)//查询是否冻结
保护对象只影响自由属性，不影响这些属性的值
实例constructor属性
默认函数包含一个实例原型对象
function C(){}
C.prototype.constructor===C//true
constructor属性的用例
切换对象的构造函数
下面的catch子语句中，我们根据捕获异常的构造函数不同，采取不同的处理
try{
....
}catch(e){
switch(e.constructor){
case SyntaxError;
...
break;
case CustomError;
...
break;
}
}
确定对象的构造函数名
function Foo(){}
var f=new Foo();
f.constructor.name//'foo'
创建相似对象,它和已有的对象x都有相同的构造函数: 可用于子构建函数实例的方法，且想要创建一个和this相似的新实例。这样就不能使用一个固定的构造函数
function Constr(){}
var x=new Constr();
var y=new x.constructor();
console.log(y instanceof Constr);//true
指向父构造函数
一些继承库把父构造函数赋值给子构造函数的一个属性 例如YUI框架通过Y.extend提供子类
function Super(){}
function Sub(){
Sub.superclass.sonstructor.call(this);
}
Y.extend(Sub,Super);
对象不是Object的实例
机会所以对象都是Object的实例，因为Object.prototype在这些对象的原型链上，但是也有对象不属于这种情况
Object.create(null) instancefo Object//false
Object.prototype instanceof Object//false
在Web浏览器中，每一帧和窗口都有自己的域，具有独立的全局变量。这使得instanceof不可用于这些跨域的对象。
原型属性的数据
--
对于实例属性，避免使用带初始值的原型属性
function Names(data){
if(data){
this.data==data;
}
}
Names.prototype.data=[];
var n1=new Names();
var n2=new Names();
n1.data.push("jane")
console.log(n1.data);
console.log(n2.data);
//都是jane
push改变了Names.prototype.data 的数组。因为这个数字被所以的没有字有自有属性的data的实例共享，所以n2也被影响了
根据需要创建实例属性
function Names(data){
if(data){
this.data=data;
}
}
Names.prototype={
constructor:Names,
get data(){
Object.defineProperty(this,'data',{
value:[],
enumerable:true,
configurable:false,
writable:false
});
return this.data;
}
}
保持数据的私有化
- 构造函数环境中的私有化
- 带有特殊标记键的属性中的私有数据
- 具体化键的属性中的私有数据
在调用构造函数时，创建了两个东西：构造函数实例和环境。该实例有构造函数初始化，而该环境保持了构造函数的参数和局部变量。每个在构造函数内部创建的函数（包括方法）都会保存此环境（创建函数时的环境）的引用。由于保存了此环境的引用，即使在构造函数执行结束后，也仍然可以访问这个环境。实例的三个值
- 公有属性
- 私有值
- 特权方法(私有方法)
公有属性
function Constr(...){
this.publicData=...;
}
私有值
function Constr(...){
...
var that=this;
var privateData=...;
function privateFunction(...){
privateData=...;
that.publicData=...;
that.publicMethod(...);
}
}
特权方法
function Constr(...){
...
this.privilegedMethod=function(...){
privateData=...;
privateFunction(...);
this.publicData=...;
this.publicMethod(...);
}
}
使用标记建保存私有数据
var KEY_BUFFER="_StringBuilder_buffer";
var StringBuilder=function(){
var KEY_BUFFER='_StringBuilder_buffer';
function StringBuilder(){
this[KEY_BUFFER]=[];
}
StringBuilder.prototype={
Constructor:StringBuilder,
add function(str){
this[KEY_BUFFER].push(str);
},
toString:function(){
return this[KEY_BUFFER].join('');
}
return StringBuilder;
}();
通过IIFE保持全局数据私有
var obj=function(){
var self={
publlicMethod:function(...){
privateData=...;
privvateFunction(...);
},
publicData:...
};
var privateData=...;
function privateFunction(){
privateData=...;
self.publicData=...;
self.publicMethod(...);
}
}();
稀疏数组和密集数组
含有空缺的数组称为稀疏数组。不含空缺的数组称为密集
var sparse=[,,'C'];
var dense=[undefined,undefined,'C'];
sparse.length//3
dense.length//3
0 in psarse//false
0 in dense//true
for(var i=0;i<sparse.length;i++)console.log(sparse[i])//undefined,undefined,c
for(var i=0;i<sparse.length;i++)console.log(dense[i])//undefined,undefined,c
forEach会跳过空缺但不跳过undefined元素
sparse.forEach(function(x){console.log(x)})//c
dense.forEach(function(x){console.log(x)})//undefined,undefined,c
数组遍历
- forEach,every会跳过空缺
- map会跳过，但是保留空缺
- filter会去除空缺
- join会把空缺，undefined和null转化为空字符串
- sort在排序时保留空缺
- apply把空缺转化为undefined
数组原型方法
- Array.prototype.shift()//移除索引0处的元素并返回该元素。随后元素的索引依次减1
- Array.prototype.unshift(eleml?,elem2?,...)//在数组最前面增加给定元素，返回新的数组
- Array.prototype.pop()移除最后一个元素并返回该元素
- Array.prototype.push(...)//在数组尾部添加给定元素
- Array.prototype.reverse()颠倒数组中的元素顺序，并返回指向元数组的引用
- Array.prototype.sort()//数组排序，并返回排序后的数组
- Array.prototype.concat(arr1?,arr2?,...)//合并数组
- Array.prototype.join(sperator?)//对数组元素应用toString()创建字符串，并用sperator连接字符串
- Array.prototype.reduce(callback,initialValue)//从左到右迭代，并按照之前描述的调用回调函数。
JSON
JSON.stringify(value,replacer?,space?)
将JavaScript值value转换为JSON字符串
function replacer(key,value){
if(typeof value==='number'){
value=2*value;
}
return value;
}
JSON.stringify({a:5,b:[2,8]},replacer)
//{a:10,b:[4,16]}
3
属性键白名单，隐藏非数组对象内属性
JSON.stringify({foo:1,bar:{foo:1,bar:1}}，['bar']}//{bar:{bar:1}}
网友评论