ES6面向对象基础（1）

javascript(ES6)面向对象基础(1)

1.创建对象

1.var obj={};
2.new Object;
3.Object.create(proto,[propertiesObject]); proto对象原型 源对象
propertiseObject 一组属性和值，该参数对象不能是undefined，只有该对象自身拥有可枚举的属性才有效，该对象原型链上的属性是无效的

2.对象的操作方法

1.delete 删除对象属性
eg: var obj={a:1,b:2}
delete obj.a;也可以根据键值删除对象下的属性

2.assign(target,…sources) 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。
2.1复制对象
注意：如果用 var obj = obj1 这是引用，两者间回产生联系。
方法：合并拷贝
继承属性和不可枚举的属性是不能被拷贝的（这属于浅复制）

3.defineProperties
Object.defineProperties(obj,props)
给对象定义属性值(可定义多个属性)
Object.defineProperties(对象，{
属性名：{
value：属性值
writalbe:可写入属性
}
})

4.defineProperty可定义一个属性
var obj ={};
Object.defineProperty(obj,“属性名”,{
enumerable:false; 是否可被枚举。默认为true
configurable:false; 是否上面设置的属性是否可写，可删除 默认是true
writable:false; 是否可以写入 ，默认是true
value:属性值
})

5.getOwnPropertyNames 返回包含属性值的数组

var obj={a:1,b:2,c:3}
var arr=Object.getOwnPropertyNames(obj);
打印显示的是[a,b,c]

6.getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor(obj,prop)
获取对象下属性的描述，也就是使用defineProperty定义的所有属性的描述内容

7.freeze
object.freeze(obj) 冻结对象，使用该方法以后，不能修改该对象的所有属性，不能删除所有属性

8.判断方法集合
Object.is(value1,value2) 判断两个对象或者 两个内容是否相等 相当于 “===”
Object.isExtensible(obj) 判断一个对象是否是可扩展的 可在其上添加新的属性
Object.isFrozen(obj) 判断一个对象是否被冻结
var obj1=Object.create(obj);
console.log(“c” in obj1) 可以判断是否是对象的对象属性或者对象的原型链属性
console.log(obj1.hasOwnProperty(“c”)); 判断是否是对象的对象属性
console.log(obj.isPrototypeOf(obj1)); 判断某个对象是否是另外一个对象的原型链

//数据类型    
number string boolean undefined object function symbol

//判断该对象的原型链上是否有这个类型  instanceof
    console.log(arr instanceof Array)
    console.log(arr instanceof Object);
    
    console.log(b instanceof Object);
    console.log(b instanceof Array);
    console.log(b instanceof Box);

    判断该对象的抽象类   constructor 判断抽象类 或者 对象 比较稳定
    console.log(b.constructor===Box);

    判断对象下某个属性是否可以枚举
  console.log(  obj.propertyIsEnumerable("b"));

3.函数的执行

call 参数写在第二位开始的参数部分 call和apply指向的 this 会立即执行
fn1.call(null,3,5)
apply 参数写在第二位的数组中
fn1.apply(null,[3,5]);call和apply第一个参数是为了替换函数中this的指向
第一个参数会替代函数中this的指向

bind(this) 将函数中的this绑定为带入的对象，但不执行该函数
bind是返回一个新函数,这个函数中this都被替代为绑定的对象,当执行是this就会全部指向这个对象
this.arr.forEach(this.each.bind(this));
call和apply一般应用于要即时执行的函数中替代this
bind一般用于回调函数中替代this指向

4.this存在的8种情况

1\ Es5全局this
this.a=3; this->window
var b=5;
function fn(){
    var b=10;
    console.log(b+this.b); this->window
}// 这种方法仅限于ES5,在ES6严格模式中this将会变成undefined

2\数组的所有遍历方法 forEach map filter reduce every some flatMap sort
这些方法均使用了回调函数 因此在所有使用回调函数的方法中，除事件函数
其他所有回调函数中this都被指向window setInterval setTimeOut
var obj={
    a:function(){
        this.b(this.c);
        doucment.addEventListener("click",function(this){
        		//这里面的this 指代的是doucment 对象
        })
    },
    b:function(fn){
        fn();//当作为回调函数执行时，this指向我window
    },
    c:function(){
        console.log(this);
    }
}
obj.a();
var obj = {
            fn: function () {
                console.log(this);//指代的是对象
                return function () {
                    console.log(this);//this--->window
                }
            }
        }

       var fn=obj.fn();
       fn();//因为是在另外的作用域调用

3\对象中this
var c=100;
var obj={
	c:10,
    b:this.c,
    //this-->window 定义属性时，obj对象还没有创建完成，this仍旧指向window
    a:function(){
        console.log(this.c);this-->obj
    }
    d:()=>{
        console.log(this);
        //对象中的匿名函数this-->window
    }
}

4\class中的this
 class Box{
        a=3;
        static abc(){ //如果 是static 方法
            console.log(this);//Box  静态方法调用就是通过类名.方法
            // Box.abc();
            // 尽量不要在静态方法中使用this
        }
        constructor(_a){
            this.a=_a;
        }
        play(){
            // this就是实例化的对象
            console.log(this.a);
            // 这个方法是被谁执行的,this就是谁
        }
    }
    let b=new Box(10);
    b.play();
    let c=new Box(5);
    c.play();

5\ES5 类中的this
    function Box(_a){
        this.a=_a;
    }
    Box.prototype.play=function(){
        console.log(this.a);//this就是实例化的对象
    }
    Box.prototype.a=5;
    Box.abc=function(){ //==> 相当于 static
        //this
        // 这样的方法,等同于静态方法
    }

6\事件函数中this
    document.addEventListener("click",clickHandler);
    function clickHandler(e){
        console.log(this);//this--->e.currentTarget
    }
//等价于 监听事件函数中this ->e.currentTarget 监听事件对象本身

7\call apply bind
        function fn(a,b){
            this.a=a;//this如果使用了call,apply,bind,this将会被指向被绑定的对象
            this.b=b;
            return this;
        }

        var obj=fn.call({},3,5)
        var obj=fn.apply({},[3,5])
        var obj=fn.bind({})(3,5);

8\ 箭头函数
            var obj={
                a:function(){
                    document.addEventListener("click",e=>{
                        console.log(this);//指向事件侦听外函数中的this/obj
                    });
                    var arr=[1,2,3];
                    arr.forEach(item=>{
                        console.log(this);//this-->obj
                    });
                    // 相当于自带bind(this)的作用
                    arr.forEach((function(item){

                    }).bind(this));
                }
            }