JavaScript高级学习：面对对象——Object对象的实例成员和静态成员

提示：
本文为JavaScript栏目：JavaScript高级系列——面对对象章节

---

前言

本文讲解Object对象的实例成员和静态成员。

---

提示：以下是本篇文章正文内容，下面案例可供参考

Object对象的实例成员和静态成员

Object对象是一个很特殊的对象，他没有任何的显式的属性，一般用来创建新对象。

JS中所有对象类型都直接或间接的继承Object对象

所以Object对象可用的函数和隐式属性，所有对象都可以使用。

toString函数就是属于Object对象的。

实例成员：通过对象名调用的函数或属性都称为实例成员

静态成员：通过构造函数名调用的函数或属性称为静态成员

Object对象的实例成员

function Stu() {
    this.name="张三";
    this.age=18;
}
Stu.prototype.sex="男";

重写toString函数

Stu.prototype.toString=function () {
    return "你猜猜我是谁";
}

let s=new Stu();
/*对象类型在输出的时候，都会自动调用toString方法*/
console.log(s.toString());//你猜猜我是谁

console.log是对于输出的对象都进行了toString的重写

console.log(s);			//Stu {name: "张三", age: 18}
console.log(s.valueOf());//Stu {name: "张三", age: 18}
alert(s);				//你猜猜我是谁
alert(s.toString());	//你猜猜我是谁
alert(s.valueOf());		//你猜猜我是谁

Date对象举例

let d=new Date();
console.log(d.getTime());	//1619319244154
console.log(d.valueOf());	//1619319244154

Date函数中重写了valueOf函数，让其返回时间戳。但是推荐大家使用getTime函数来获取时间戳

hasOwnProperty函数

hasOwnProperty函数用来判断某个属性是否是对象的构造属性，原型属性或不存在的属性返回false

let s=new Stu();
console.log(s.hasOwnProperty("name"));	//true
console.log(s.hasOwnProperty("age"));	//true
console.log(s.hasOwnProperty("sex"));	//false
console.log(s.hasOwnProperty("sex2"));	//false

let s2=Stu.prototype;//原型是继承自Object的原型
console.log(s2.hasOwnProperty("sex"));		//true
console.log(s2.hasOwnProperty("toString"));	//true

Object对象的静态成员1

let obj1={
    name:"张三丰",
    age:88
}
let obj2={
    name:"张无忌",
    sex:"男"
}
/*合并对象,obj2的内容合并到obj1当中*/
Object.assign(obj1,obj2);

obj1的输出：

console.log(obj1);
Object
    age: 88
    name: "张无忌"
    score: 99
    sex: "女"

obj2的输出：

console.log(obj2);
Object
    name: "张无忌"
    sex: "男"

可以传递多个参数，最终都是合并到第一个对象中

Object.assign(obj1,obj2,obj3);

浅拷贝

浅拷贝：目标对象的属性值如果是对象时，拷贝对象的相同属性会直接覆盖目标对象的该属性。

let obj4={
    score:{
        yw:88,
        sx:90,
        java:100
    },
    name:"张三"
}
let obj5={
    score:{
        yw:99,
        sx:60
    },
    name:"李四",
    age:18,
    show:function () {
        console.log("show");
    }
}
Object.assign(obj4,obj5);
console.log(obj4);
	Object{
        age: 18
        name: "李四"
        score: {yw: 99, sx: 60}
        show: ƒ ()
    }
console.log(obj5);
	Object{
        age: 18
        name: "李四"
    }

获取对象的所有属性组成数组

let keys=Object.keys(obj5);
console.log(keys);
    Array(4){
        0: "score"
        1: "name"
        2: "age"
        3: "show"
    }

Object对象的静态成员2

let obj={
    name:"张三"
};

create函数

create函数会生成一个新对象，这个新对象的原型是由参数对象提供的。

create函数第二个参数要求给定一个属性的描述对象。

比如希望添加一个age属性，则需要写：age:{value:18}赋值，此时该属性默认为只读状态。

let obj2=Object.create(obj,{age: {
        value:18,
        writable:true//设置属性可以写入
    }});
console.log(obj);
	/*Object
		name: "张三"*/
console.log(obj2);
	/*Object
		age: 20*/

obj2.age=20;
console.log(obj2);
	/*
        Object
            age: 20
	*/

create函数举例

建立一个父类

function F() {
    this.x=1;
    this.y=2;
}
F.prototype.show=function () {
    console.log(this.x);
    console.log(this.y);
}

建立一个子类

function S() {
    /*继承构造函数*/
    F.call(this);
}

子级对象的原型通过create函数获取父级原型

S.prototype=Object.create(F.prototype);
let s=new S();
console.log(s);//S
    /*
        S
            x: 1
            y: 2
    */
console.log(s.__proto__);//F

Object对象的静态成员3

限制属性的操作

let stu={
    name:"张三",
    age:18
};

通过defineProperty追加的sex属性默认是只读的

Object.defineProperty(stu,"sex",{value:"男"});
console.log(stu);
	/*
	{name: "张三", age: 18, sex: "男"}
	*/
stu.sex="女";
console.log(stu);
	/*
	{name: "张三", age: 18, sex: "男"}
	*/

设置新加的属性可以更改

Object.defineProperty(stu,"score",{
    value:88,
    writable:true
});
console.log(stu);	//{name: "张三", age: 18, sex: "男", score: 88}

stu.score=99;
console.log(stu);	//{name: "张三", age: 18, sex: "男", score: 99}

Object.defineProperty(stu,"score",{
    writable:false
});
stu.score=59;
console.log(stu);	//{name: "张三", age: 18, sex: "男", score: 99}

configurable设置属性是否可以删除，和是否可以更改设置时的可写入状态

Object.defineProperty(stu,"nickname",{
    value:"小张",
    writable:true,
    /*configurable设置nickname属性是否可以删除，和是否可以更改设置时的可写入状态*/
    configurable:false
});
console.log(stu);
	//{name: "张三", age: 18, sex: "男", score: 99, nickname: "小张"}
Object.defineProperty(stu,"nickname",{
    writable:false
});
stu.nickname="老张";
delete stu.age;         //age属性可以删除
delete stu.nickname;    //nickname属性不能删除
console.log(stu);
	//{name: "张三", sex: "男", score: 99, nickname: "小张"}

Object对象的静态成员4

getter和setter

let obj={_age:18};
Object.defineProperty(obj,"age",{
    get:function () {
        return this._age;
    },
    set:function (age) {
        if(age>120){
            this._age=120;
        }else if(age<0){
            this._age=0;
        }else{
            this._age=age;
        }
    }
});
console.log(obj.age);	//18
obj.age=180;
console.log(obj.age);	//120
obj.age=-20;
console.log(obj.age);	//0
obj.age=88;
console.log(obj.age);	//88
console.log(obj);		//{_age: 88}

Object对象的静态成员5

defineProperty函数

function Student(){
    let name;
    let age;
    Object.defineProperty(this,"name",{
        set:function (value) {
            name=value;
        },
        get:function () {
            return name;
        }
    });
    Object.defineProperty(this,"age",{
        set(value){
            if(value>120){
                age=120;
            }else if(value<0){
                age=0;
            }else{
                age=value;
            }
        },
        get(){
            return age;
        }
    });
}
let stu=new Student();
console.log(stu);
stu.name="张无忌";
console.log(stu.name);
stu.age=188;
console.log(stu.age);