zoukankan      html  css  js  c++  java
  • Object

    1. 介绍:阐述 Object 对象。

    2. 构造函数:介绍 Object 对象的构造函数。

    3. 实例属性:介绍 Object 对象的实例属性:prototype、constructor等等。

    4. 实例方法:介绍 Object 对象的实例方法: hasOwnProperty、isPrototypeOf、propertyIsEnumerable等等。

    5. 静态方法:介绍 Object 对象的静态方法:Object.create()、Object.defineProperties()等等。

    6. 属性描述符:介绍属性描述符的类别:数据属性与访问器属性。

    1. 介绍

      Object对象,是所有JavaScript对象的超类(基类)。Object.prototype(Obecjt的原型)定义了Js对象的基本方法和属性。

    2. 构造函数

    2.1 new Object() :返回一个Object实例

    2.2 new Object(value) :根据value的值,返回不同的对象(Number、Boolean、String)

    参数:

    ①value {number | bool | string} :一个数字、布尔值或者字符串

    返回值:

    {Number、Boolean、String} 返回一个转换后的对象

    示例 :

    1
    2
    3
    4
    5
    6
    var o = new Object(123);
    console.log(o); // => Number对象
    o = new Object(true);
    console.log(o); // => Boolean对象
    o = new Object('abc');
    console.log(o); // => String对象

    3. 实例属性

    3.1 __proto__ :设置或返回对象的原型对象(IE中不支持此属性)

    说明:

    1) 赋值时,对象继承新原型的所有方法和属性,以及新原型的原型链中的所有方法和属性。

    2) 属性名称以两个下划线开始和结束。

    3) 对象的__proto__ == 对象类的prototype

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 1.自定义对象多层继承
    function People(name) {
        this.name = name;
    }
     
    function Student(age) {
        this.age = age;
    }
    Student.prototype = new People(); // 设置Student的原型为People对象
     
    var s = new Student(22);
    console.log(s.__proto__); // => People 对象
    console.log(Student.prototype); // => People 对象
    console.log(s.__proto__ == Student.prototype); // => true
     
    // 2.对象直接量
    var p = {}; // 等于new Object()
    console.log(p.__proto__ == Object.prototype); // => true

    3.2 prototype :设置或返回对象类的原型对象

    说明:

    1) prototype为对象类的属性。__proto__是对象的属性。

    2)  Js内置对象(Array、Date等对象)都有一个只读的prototype属性。 可将属性和方法添加到原型中,但不能为内置对象分配其他原型。

    3) 自定义对象的prototype属性可进行读写操作。

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var Student = function (name) {
        this.name = name;
    };
    // 给Student的原型添加一个sayHello方法
    Student.prototype.sayHello = function () {
        alert('Hello,' this.name);
    }
    var st = new Student('张三'); // 初始化对象st
    console.log(st.name); // => 张三
    st.sayHello(); // 弹出:Hello,张三

    3.3 constructor :表示创建此对象的构造函数

    说明:

    1) 设置或返回创建此对象的构造函数。

    2) 若一个对象有多层继承,将返回最先调用的构造函数。

    3) obj.constructor.prototype 可表示对象的原型。

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 1.内置对象
    var str = 'abc';
    console.log(str.constructor); // => function String 构造函数
    var o = {};
    console.log(o.constructor); // => function Object 构造函数
     
    // 2.自定义对象多层继承 :constructor返回最先调用的构造函数
    function People(name) {
        this.name = name; // s对象初始化时,先调用People构造函数,再调用Student构造函数
        console.log('People调用');
    }
    function Student(age) {
        this.age = age;
        console.log('Student调用');
    }
    Student.prototype = new People(); // 设置Student的原型为People对象
     
    var s = new Student(22);
    console.log(s.constructor); // => function People 构造函数

    总结:__proto__、prototype、constructor 的关系

    说明:

    1) 对象的__proto__ 等于 类的prototype

    2) 对象的constructor 等于 类,所以obj.constructor.prototype 可表示对象的原型。

    示例:

    1
    2
    3
    4
    var o = {};
    console.log(o.__proto__ === Object.prototype); // true :对象的__proto__等于类的prototype
    console.log(o.constructor === Object); // true :对象的constructor 等于 类
    console.log(o.constructor.prototype === Object.prototype); // true :o.constructor.prototype 可表示对象的原型。

      

    4. 实例方法

    4.1 hasOwnProperty(propertyName) :判断对象是否拥有一个指定名称的实例属性(非继承)

    参数:

    ①propertyName {string} :属性名称。

    返回值:

    {bool} 判断对象是否拥有一个指定名称的本地定义(非继承)的属性;此方法不会检查对象原型链中的属性。

    true :属性为对象的实例属性,非继承。

    false :属性不为对象的实例属性。

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 1.Object对象
    var o = new Object();
    o.name = '自定义属性'// 定义一个实例属性
    console.log(o.hasOwnProperty('name')); // => true:name属性为实例o自己定义的,而非继承
    console.log(o.hasOwnProperty('toString')); // => false:toString为继承属性
     
    // 2.自定义对象
    var Student = function (name) {
        this.name = name;
    };
    // 给Student的原型添加一个sayHello方法
    Student.prototype.sayHello = function () {
        alert('Hello,' this.name);
    }
    // 给Student的原型添加一个age属性
    Student.prototype.age = '';
     
    var st = new Student('张三'); // 初始化对象st
    console.log(st.hasOwnProperty('name')); // => true :调用构造函数时,通过this.name附加到实例对象上
    console.log(st.hasOwnProperty('sayHello')); // => false :sayHello方法为原型上的成员
    console.log(st.hasOwnProperty('age')); // => false :age属性为原型上的成员

    4.2 isPrototypeOf(obejct) :判断某个原型是否出现在对象的原型链中

    语法:

    prototype.isPrototypeOf(object)

    参数:

    ①obejct {object} :被检测的对象。

    返回值:

    {bool} 返回某个原型是否出现在对象的原型链中

    true :是

    false :不是

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 1.Obejct对象
    var o = new Object();
    console.log(Object.prototype.isPrototypeOf(o)); // => true :o为Obejct一个对象
     
    // 2.Array
    var array = [1, 2, 3];
    console.log(Array.prototype.isPrototypeOf(array)); // => true :数组原型
    console.log(Object.prototype.isPrototypeOf(array)); // => true :Object是所有对象的基原型
     
    // 3.自定义对象
    var People = function () {
    }
    var Student = function () {
    }
    // 设置Student类的原型为People
    Student.prototype = new People();
    var st = new Student();
    console.log(Student.prototype.isPrototypeOf(st)); // => true :st为Student一个对象
    console.log(People.prototype.isPrototypeOf(st)); // => true :Student的原型为People
    console.log(Object.prototype.isPrototypeOf(st)); // =>true :Object是所有对象的基原型

    4.3 propertyIsEnumerable(propertyName) :判断指定名称的属性是否为实例属性并且是可枚举的(可用for/in循环枚举)

    参数:

    ①propertyName {string} :属性名称

    返回值:

    {bool} 判断属性是否为实例属性并且是可枚举的(可用for/in循环枚举),不考虑原型链中的成员。

    true :是

    false :不是

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 1.Array对象
    var array = [1, 2, 3];
    array.name = 'Array';
    console.log(array.propertyIsEnumerable('name')); // => true :name属性为实例属性
    console.log(array.propertyIsEnumerable('join')); // => false :join方法继承自Array
    console.log(array.propertyIsEnumerable('length')); // => false :length属性继承自Array
    console.log(array.propertyIsEnumerable('toString')); // => false :toString方法继承自Object
     
    // 2.自定义对象
    var Student = function (name) {
        this.name = name;
    }
    // 定义一个原型方法
    Student.prototype.sayHello = function () {
        alert('Hello' this.name);
    };
    var a = new Student('tom');
    console.log(a.propertyIsEnumerable('name')); // => true :name为自身定义的实例属性
    console.log(a.propertyIsEnumerable('age')); // => false :age属性不存在,也返回false
    console.log(a.propertyIsEnumerable('sayHello')); // => false :sayHello属于原型方法

    4.4 toLocaleString() :返回当前对象的一个本地化的字符串表示

    4.5 toString() :返回当前对象的一个字符串表示形式

    4.6 valueOf() :返回当前对象的原始值

    参数:

    返回值:

    {object} 返回当前对象关联的原始值,若没有相关联的值,则返回对象本身

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var a = [1, 2, 3];
    console.log(a.valueOf()); // => [1, 2, 3]
     
    var b = true;
    console.log(b.valueOf()); // => true
     
    var c = {};
    console.log(c.valueOf()); // => Object {}
     
    var s = 'abc';
    console.log(s.valueOf()); // => abc
     
    // 自定义个对象,重写valueOf
    var customObject = {};
    customObject.valueOf = function () {
        return '自定义对象';
    }
    console.log(customObject.valueOf()); // => 自定义对象

    5. 静态方法

    5.1 Object.create(prototype, propertyDescriptor):创建并返回一个指定原型和指定属性的对象

    参数:

    ①prototype {prototype} :返回对象的原型,可以为null。若为null,对象的原型为undefined。

    ②propertyDescriptor {propertyDescriptor} 可选:属性描述符。

    属性描述符:设置属性的一系列特性;

    语法格式:

    1
    2
    3
    4
    5
    6
    propertyName: {
        value: ''// 设置此属性的值
        writable: true// 设置此属性是否可写入;默认为false:只读
        enumerable: true// 设置此属性是否可枚举(通过for/in预付);默认为false:不可枚举
        configurable: true // 设置此属性是否可配置;如:是否可以修改属性的特性及删除属性。默认为false
    }

    返回值:

    {object} 返回一个指定原型和指定属性的对象

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 建立个自定义对象,设置name和age属性
    var obj = Object.create(null, {
        name: {
            value: 'tom',
            writable: true,
            enumerable: true,
            configurable: true
        },
        age: {
            value: 22
        }
    });
    console.log(obj.name); // => tom
    console.log(obj.age); // => 22
     
    obj.age = 28;
    console.log(obj.age); // => 22 :age属性的writable默认为false,此属性为只读
     
    for (p in obj) {
        console.log(p); // => name :只输出name属性;age属性的enumerable默认为false,不能通过for/in 枚举
    }

    5.2  Object.defineProperties(object, propertyDescriptor) :添加/修改对象一个或多个属性的特性

    参数:

    ①object {object} :对象

    ②propertyDescriptor {propertyDescriptor} 属性描述符。

    说明:

    若对象包含此属性,则是修改此属性的特性;否则为为对象添加此属性。

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var obj = {};
     
    // 为对象添加name和age属性
    Object.defineProperties(obj, {
        name: {
            value: 'tom',
            enumerable: true
        },
        age: {
            value: 22,
            enumerable: true
        }
    });
    for (p in obj) {
        console.log(p); // => name、age :输出name和age属性
    }

      

    5.3 Object.defineProperty(obj, propertyName, propertyDescriptor) :添加/修改对象指定属性的特性

    参数:

    ①object {object} :对象

    ②propertyName {string} :属性的名称

    ③propertyDescriptor {propertyDescriptor} 属性描述符。

    说明 :

    若对象包含此属性,则是修改此属性的特性;否则为添加此属性。

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj = {};
    // 添加一个name属性
    Object.defineProperty(obj, 'name', {
            value: 'tom',
            writable: true,
            enumerable: true,
            configurable:true
        }
    );
    console.log(obj.name); // => tom :输出name属性的value的值

    5.4 Object.freeze(object) :冻结对象,使其不能添加属性以及无法对现有的实例属性进行特性更改、值修改、属性删除等操作

    参数:

    ①object {object} :对象

    说明 :

    1) 此操作不可逆,冻结后无法进行解封。

    2) 只影响实例属性,不影响原型属性。

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj = {
        name: 'tom',
        age: 22
    };
    Object.freeze(obj); // 冻结对象
     
    obj.email = '123@qq.com';
    console.log(obj.email); // undefined :无法添加属性
    obj.age = 25;
    console.log(obj.age); // 22 :无法设置属性的值

    5.5 Object.getOwnPropertyDescriptor(object, propertyName) :返回对象属性的描述符

    参数:

    ①object {object} :对象

    ②propertyName {propertyName} 属性名称

    返回值:

    {propertyDescriptor} 属性描述符对象

    示例 :

    1
    2
    3
    4
    5
    6
    7
    var obj = {
        name: 'tom',
        age: 22
    };
     
    var propertyDes = Object.getOwnPropertyDescriptor(obj, 'name');
    console.log(propertyDes); // => Object {value: "tom", writable: true, enumerable: true, configurable: true} :输出描述符对象

      

    5.6 Object.getOwnPropertyNames(object) :返回一个数组,包含对象的所有实例属性和方法,不包含原型继承的属性和方法

    参数:

    ①object {object} :对象

    返回值:

    {Array} 一个数组,包含对象的所有实例属性和方法,不包含原型继承的属性和方法

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    var obj = {
        name: 'tom',
        age: 22,
        sayHello: function () {
            alert('Hello' this.name);
        }
    };
    console.log(Object.getOwnPropertyNames(obj)); // => ["name", "age", "sayHello"] :返回对象的实例成员

    5.7 Object.getPrototypeOf(object) :返回对象的上一级原型

    参数:

    ①object {object} :对象

    返回值:

    {object} 返回原型对象

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 1.对象直接量
    var obj = {
        name: 'tom',
        age: 22,
        sayHello: function () {
            alert('Hello' this.name);
        }
    };
    console.log(Object.getPrototypeOf(obj)); // => Object 对象:对象直接量的原型为Object
     
    // 2.自定义对象
    var People = function (name) {
        this.name = name;
    };
     
    var p = new People('tom');
    var people = Object.getPrototypeOf(p);
    console.log(people); // => People 对象:new 创建的对象使用构造函数的prototype属性作为他们的原型
    console.log(Object.getPrototypeOf(people)); // => Object 对象:原型People的原型为Object

      

    5.8 Object.isExtensible(object) :判断是否可向对象添加新的属性

    5.9 Object.isFrozen(object) :判断对象是否冻结;true:不能修改对象的现有属性特性和值并且不能添加新的属性

    5.10 Object.isSealed(object) :判断对象是否封闭;true:不能修改对象的现有属性特性并且不能添加新的属性

    5.11 Object.keys(object) :返回一个数组,包含对象的可枚举的实例属性名称

    参数:

    ①object {object} :对象

    返回值:

    {Array} 返回一个数组,包含对象可枚举的实例属性名称

    说明:

    此方法与getOwnPropertyNames()类似,但getOwnPropertyNames()包含了可枚举和不可枚举的成员

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var obj = {
        name: 'tom',
        age: 22,
        sayHello: function () {
            alert('Hello' this.name);
        }
    };
     
    // 1)getOwnPropertyNames与keys方法返回的内容都相同
    console.log(Object.getOwnPropertyNames(obj)); // => ["name", "age", "sayHello"] :返回对象的所有实例成员
    console.log(Object.keys(obj)); // => ["name", "age", "sayHello"] :返回对象的所有可枚举成员
     
    // 设置对象的name属性不可枚举
    Object.defineProperty(obj, 'name', {
            enumerable: false
        }
    );
     
    // 2)keys方法,只包含可枚举成员
    console.log(Object.getOwnPropertyNames(obj)); // => ["name", "age", "sayHello"] :返回对象的所有实例成员
    console.log(Object.keys(obj)); // => ["age", "sayHello"] :返回对象的所有可枚举成员

      

    5.12 Object.preventExtensions(object) :设置对象不能添加新的属性

    参数:

    ①object {object} :对象

    返回值:

    {object} 返回此对象

    示例 :

    1
    2
    3
    4
    5
    6
    7
    var obj = {
        name: 'tom',
        age: 22
    };
    Object.preventExtensions(obj); // 设置对象不能添加新的属性
    obj.email = '123@qq.com';
    console.log(obj.email); // => undefined :无法向对象添加新的属性

    5.13 Object.seal(object) :密封对象,使其无法修改现有属性的特性以及不能添加新的属性

    参数:

    ①object {object} :对象

    返回值:

    {object} 返回此对象

    示例 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var obj = {
        name: 'tom',
        age: 22
    };
    Object.seal(obj); // 密封对象
    obj.email = '123@qq.com';
    console.log(obj.email); // => undefined :无法向对象添加新的属性
     
    // 报异常:无法修改对象属性的特性
    Object.defineProperty(obj, 'name', {
            enumerable: false
        }
    );

    6.属性描述符

    分为数据属性和访问器属性;

    两者可相互转换,若转换后未设置enumerable和configurable特性(两类属性描述符都包含这2个特性),将默认采用转换前的值。

    6.1 数据属性

    说明:包含属性的操作特性;如:设置值、是否可枚举等等

    特性名称 描述 默认值
    value 设置属性的值 undefined
    writable 是否可修改属性的值;true:可修改属性的值;false:不可修改属性的值 false  
    enumerable 是否可枚举属性;true:可枚举,可通过for/in语句枚举属性;false:不可枚举 false
    configurable 是否可修改属性的特性;true:可修改属性的特性(如把writable从false改为true);false:不可修改属性的特性 false

    默认值:

    1)在使用Object.defineProperty、Object.defineProperties 或 Object.create 函数的情况下添加数据属性,writable、enumerable和configurable默认值为false。

    2)使用对象直接量创建的属性,writable、enumerable和configurable特性默认为true。

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 1)对象直接量;属性特性默认为true
    var o1 = {
        name: 'tom'
    };
    console.log(Object.getOwnPropertyDescriptor(o1, 'name')); // => Object {value: "tom", writable: true, enumerable: true, configurable: true}
     
    // 2)通过Object.create创建,属性特性默认为false
    var o2 = Object.create(null, {
        name: {value:'tom'}
    });
    console.log(Object.getOwnPropertyDescriptor(o2, 'name')); // => Object {value: "tom", writable: false, enumerable: false, configurable: false}

    6.2 访问器属性

    说明:设置属性的访问方式;set、get特性等

    特性名称 描述 默认值
    get 属性的返回值函数 undefined
    set 属性的设置值函数;含有一个赋值参数 undefined
    enumerable 是否可枚举属性;true:可枚举,可通过for/in语句枚举属性;false:不可枚举 false
    configurable 是否可修改属性的特性;true:可修改属性的特性(如把writable从false改为true);false:不可修改属性的特性 false

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var obj = {};
     
    // 添加一个属性,并设置为访问器属性
    Object.defineProperty(obj, "name", {
        get: function () {
            return this._name; // get和set里的变量不要使用属性,如:属性为name,get和set用的是_name
        },
        set: function (x) {
            if (isNaN(x)) {
                this._name = x;
            else {
                this._name = 'name不能为纯数字';
            }
        },
        enumerable: true,
        configurable: true
    });
     
    console.log(Object.getOwnPropertyDescriptor(obj, 'name')); // => Object {get: function, set: function, enumerable: true, configurable: true}
    obj.name = '12';
    console.log(obj.name); // => name不能为纯数字

       引用自:https://www.cnblogs.com/polk6/p/4340730.html

  • 相关阅读:
    Linux系统的vi命令
    log4j.properties配置详解与实例
    Jsp获取Java的重定向赋值(String)
    Jsp获取Java的对象(JavaBean)
    JS中怎么调用<%%>的值
    Java获取请求客户端的真实IP地址
    servlet+jsp+java实现Web应用
    Linux系统安装telnet以及xinetd服务
    The R Project for Statistical Computing
    【Python环境】matplotlib
  • 原文地址:https://www.cnblogs.com/Yehudic/p/10139678.html
Copyright © 2011-2022 走看看