JavaScript基础（对象）

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总是作为一个隐式参数

1. 宽松模式中的普通函数, 尽管普通函数中的this没有实际用处，但它仍然作为一个特殊的变量存在，它的值总是指向全局对象

function returnThisSloopy(){return this}
returnThissloppy()===window//true

2. 严格模式下的普通函数

this 总是undefined
function returnThisStrict(){
 'use strict'; ff 
 return this
}
returnThisStrict()===undefined//true

3. 方法,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的

解决方案

1. that ==this

that==this

   loop:function(){
    'use strict';
    var that=this;
    this.friends.forEach(
       function(friend){//1
         console.log(that.name+' knows '+friend) //2
       }
    );
   }

2. bind()

loop:function(){
    'use strict';
    var that=this;
    this.friends.forEach(
       function(friend){//1
         console.log(that.name+' knows '+friend) //2
       }.bind(this)
    );
   }

3. 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;
          }
       }

保持数据的私有化

• 构造函数环境中的私有化
• 带有特殊标记键的属性中的私有数据
• 具体化键的属性中的私有数据

在调用构造函数时，创建了两个东西：构造函数实例和环境。该实例有构造函数初始化，而该环境保持了构造函数的参数和局部变量。每个在构造函数内部创建的函数（包括方法）都会保存此环境（创建函数时的环境）的引用。由于保存了此环境的引用，即使在构造函数执行结束后，也仍然可以访问这个环境。实例的三个值

1. 公有属性
2. 私有值
3. 特权方法(私有方法)

公有属性

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}}