JavaScript学习04-class和object

Class

class User {
    //构造函数
    constructor() {
        var name = 'guo';
        this.print_name = function() {
            console.log(name);
        };
    }

    fn() {
        console.log('fn');
    }

    // User.prototype.type = 'user-kind';
    //对象属性 该属性是对象原型链上的属性
    get type() {
        return 'user-kind';
    }

    // 类的静态属性 看起来像方法，其实是属性
    //User.version = 1.0;
    //User.staticFun = function(){};
    static get version() {
        return 1.0;
    }

    static staticFun() {

    }
}

var u = new User();
console.log(User.version);
console.log(u.type);
console.log(typeof User);

class语法糖实现继承

class People {
    //特权属性和方法放到constructor里
    //constructor其实是People.prototype的属性
    constructor(name = 'default') {
            //对象自身的属性
            this.name = name;
            this.changeName = function(name) {
                this.name = name;
            }
        }
        //People.prototype.fn = function(){};
    fn() {
            console.log('Peopel fn');
        }
        //People.staticValue = 1;
    static get staticValue() {
        return 1;
    }

}

class User extends People {
    constructor(name) {
        //People.call(this, name);
        super(name);
    }

    ufn() {
        //super为People原型对象
        //People.prototype.fn.call(this);
        super.fn();
    }

    //User.prototype.__proto__ = People.prototype; -> fn()
    //和静态属性的继承
    //已经自动完成
}

var u = new User('guo');
u.fn();
console.log(User.staticValue);
u.ufn();

//代码块封装类
var User; {
    //外部访问不到key
    const key = Symbol();
    User = class {
        constructor() {
            this[key] = 1
        }
    }
}

对象

对象创建

//新创建对象的原型对象
var proto = {
    change() {}
}
var newObj = Object.create(proto, {
    a: {
        configurable: true,
        value: 'a'
    },
    b: {
        value: 'b',
        //这个属性设置为true才能被显示
        enumerable: true
    }

});
console.log(newObj);
console.log(newObj.__proto__ === proto);

//create方法实现继承
function People() {

}
People.prototype.fn = function() {};

function User() {

}
// User.protoype.__proto__ = People.prototype;
console.log(User.prototype.constructor); //User
User.prototype = Object.create(People.prototype, {
    ufn: {
        value: function() {

        },
        configurable: true
    },
    name: {
        //这都是属性不是方法
        get() {
            return this._name || 'guo';
        },
        set(v) {
            this._name = v;
            console.log(this._name);
        }
    }
});
console.log(User.prototype.constructor); //People
User.prototype.constructor = User; //修复
var u = new User();
console.log(u.name);
u.name = "guoyunhao";

对象属性访问

var key = "---100001"; //string or symbol
// var key = Symbol();
var obj = {
    a: 1,
    b: 2,
    "hello": 3,
    [key]: "8"
};
console.log(obj.b);
console.log(obj["b"]);
console.log(obj["hello"]);
console.log(obj[key]);

function factory() {
    const key = Symbol();
    var o = {
        [key]: 23,
        change(value) {
            this[key] = value;
        }
    }
    return o;
}

function factory1(name, age) {
    return {
        name,
        age
    }
}

const o = factory();
console.log(o);
o.change(22);
console.log(o);

var obj = {
    name: 'leo'
};

var desc = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(desc);

class User {
    constructor() {}
    get name() {
        return 'guo';
    }

    change() {}
}

var u = new User();
const desc2 = Object.getOwnPropertyDescriptors(u.__proto__);
console.log(desc2);

 

对象遍历

//对象的遍历
var obj = {
    a: 1,
    b: 2,
    c: 'c'
}

obj.__proto__ = {
    d: 4
}

Object.defineProperty(obj, "e", {
    value: '5',
    enumerable: false
});

for (var k in obj) {
    console.log(k, " = " + obj[k]);
}
//只能遍历本身的属性，不包含原型链和不可遍历的属性
console.log(Object.keys(obj));
//遍历本身属性，不包含原型链
console.log(Object.getOwnPropertyNames(obj));