类与继承

classList 对象
 
在HTML5新API里,页面里的每个DOM节点上都有一个classList对象
可以使用classList对象里面的方法新增、删除、修改及判断节点上的CSS类
 
classList对象里一些很有用的属性方法:
length  类名个数          
item(index)  获取类名       
add(class1,class2, ...)  添加类               
remove(class1,class2, ...)  删除类
contains(class)  判断类        
toggle(class)  反转类
 
注意:IE10以下不支持classList对象
 
 
Object的方法
 
Object.create(obj)
方法用于创建一个空对象,并把该对象的原型链接到obj对象
var obj1 = {a: 1, b: 2};
var obj2 = Object.create(obj1);
console.log(obj2.a);
 
了解《面向委托的设计》
 
Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
Object.defineProperty(obj, prop, descriptor);
obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述对象。
var obj = {
    name: 'xiaocuo',
    age: 18,
    say: function () {
        console.log('嗨,大家好');
    }
};
console.log(obj.age); //18
Object.defineProperty(obj,"age",{
    // 是否可配置
    configurable: true,
    // 是否可枚举属性(遍历属性
    enumerable: true,
    // 是否可写
    writable: true,
    value: 19
});
console.log(obj.age); // 19
for(var str in obj){
    console.log(str); // name age say
}
delete obj.name; // 删除对象属性
console.log(obj); // {age: 19, say...}
 
注:如果使用defineProperty 设置set和get方法时,不允许设置writable和value
 
set / get 方法:
set 方法就是将给入的值存储在一个中间介质变量中
get 方法就是将这个中间介质变量返回出去
var obj = {
    _a: 5,
    set a(value){
        this._a = value;// this._a 就是一个临时存储数据的中间介质变量
    },
    get a(){
        return this._a;
    }
};
console.log(obj.a);
仅有 set 没有 get 该属性是只写不可读属性
仅有 get 没有 set 该属性是只读不能写入属性
 
Object.getOwnPropertyDescriptor()
方法返回指定对象上一个自有属性的属性描述对象。
方法的第一个参数是一个对象,第二个参数是一个对象属性字符串。
var obj = {
    name: 'xiaocuo',
    age: 18
}
var propObj = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(propObj); // {...}
 
思考:显式声明变量与隐式声明变量的区别?
 
Object.keys()
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
var obj = { foo: 'bar', baz: 42 };
console.log(Object.keys(obj)); 
 
Object.assign()
方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
Object.assign(target,source, ...)方法的第一个参数是目标对象,后面的参数都是源对象。
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
var obj1 = {a:1,b:2};
var obj2 = Object.assign({},obj1);
console.log(obj2);
 
var obj3 = Object.assign({},{a:1},{b:2},{c:3},{d:4,e:5});
console.log(obj3);
 
Object.assign()方法是一种对象浅拷贝,但只能拷贝第一层,其他的只能是引用
var obj1 = {a: 1, b: 2, c: {d: 4, e: 5}};
var obj2 = Object.assign({}, obj1);
console.log(obj1.c === obj2.c);
 
对象深拷贝
var obj1 = {a: 1, b: 2, c: {d: 4, e: 5}};
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1.c === obj2.c);
 
Object.values()
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
var obj = { foo: 'bar', baz: 42 };
Object.values(obj);
 
方法用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。
不同之处只有两个:一是+0不等于-0,二是NaN等于自身。
Object.is('foo', 'foo'); // true
Object.is({}, {}); // false
 
+0 === -0 //true
NaN === NaN // false
 
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
 
 
ES6类与继承
 
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。
新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。
无需考虑ES5中令人头疼的几个部分:构造函数、原型、继承...
 
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。
新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。
无需考虑ES5中令人头疼的几个部分:构造函数、原型、继承...
 
用class定义一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。
 
class之间可以通过extends关键字实现继承,这比ES5通过修改原型链实现继承,要清晰和方便很多。
 
super关键字,它指向父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
 
ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
 
// es6类与继承
class Cat {
    constructor(n,c){ // 构造器
        this.name = n;
        this.color = c;
        this.trait = function () {
            console.log('卖萌~');
        }
    }
    skill(){ // 原型上的方法
        console.log('抓老鼠');
    }
}
class Dog extends Cat { // 继承
    constructor(n,c,f){
        super(n,c);
        this.food = f;
    }
}
 
var dog1 = new Dog('大黄','黑色','shi');
dog1.trait();
dog1.skill();
console.log( dog1.name );
console.log( dog1.color );
console.log( dog1.food );
console.log( dog1.constructor ); // Dog
原文地址:https://www.cnblogs.com/r-mp/p/11113014.html