【JavaScript】【对象】属性和方法的总结归纳

qiangdada 发布于2019-08-19 17:47 / 3379人阅读

摘要：构造函数原型对象实例对象之间的关系错综复杂，关于它们的属性和方法很多，长得也很像。表示能否修改属性的值。属性和方法以下的属性和方法均以下面的代码为例构造函数指向原型对象，包含所有被实例共享的属性和方法。

构造函数、原型对象、实例对象之间的关系错综复杂，关于它们的属性和方法很多，长得也很像。这里归纳出来，方便记忆和查阅。

对象属性类型 数据属性

[[Configurable]]：表示能否通过delete删除属性从而重新定义属性、能否修改属性的特性、能否把属性修改为访问器属性。默认值为true。
[[Enumerable]]：表示是否可枚举。默认值为true。
[[Writable]]：表示能否修改属性的值。默认值为true。
[[Value]]：包含属性的数据值，在这里读写属性。默认值为undefined。

修改属性的特性：Object.defineProperty()、Object.defineProperties()。调用这两个方法时，如果不指定，configurable、enumerable、writable特性的默认值都是false。

//定义一个属性
var person = {};
Object.defineProperty(person, "name", {
    value: "hiyohoo",
    configurable: true,
    enumerable: true,
    writable: true
});

//定义多个属性
var person = {};
Object.defineProperties(person, {
    name: {
        value: "hiyohoo"
    },
    age: {
        value: 24,
        configurable: true,
        writable: true
    }
});

获取属性的特性：Object.getOwnPropertyDescriptor()只能用于实例属性，要取得原型属性的描述符，需要在原型上使用该方法。

var descriptor = Object.getOwnPropertyDescriptor(person, "age");
alert(descriptor.writable);    //true

访问器属性

[[Configurable]]
[[Enumerable]]
[[Get]]：读取属性时调用该函数。默认值为undefined。
[[Set]]：写入属性时调用该函数。默认值为undefined。

访问器属性不能直接定义，必须使用Object.defineProperty()来定义。访问器属性常用于改变该属性，其他属性也会变化的情况。

var book = {
    _year: 2004,    //属性前面的下划线记号常用于表示只能通过对象方法访问的属性。
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function() {
        return this._year;
    },
    set: function(newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2016;
console.log(book.edition);    //13

属性和方法

以下的属性和方法均以下面的代码为例：

var Person = function(name) {
    this.name = name;
};
Person.prototype.school = "HNU";
Person.prototype.sayName = function() {
    return this.name;
};

var person = new Person("hiyohoo");

构造函数

prototype指向原型对象，包含所有被实例共享的属性和方法。

console.log(Person.prototype);    //Person{}

原型对象

constructor指向构造函数。

console.log(Person.prototype.constructor === Person);    //true

isPrototypeOf()判断实例与原型之间的关系。

console.log(Person.prototype.isPrototypeOf(person));    //true

实例对象

constructor沿着原型链找到原型中的constructor属性，最终指向构造函数。

console.log(person.constructor === Person);    //true

__proto__Firefox、Safari、Chrome支持这个属性，指向原型对象。

console.log(person.__proto__ === Person.prototype);    //true

hasOwnProperty()从Object中继承而来，判断属性是否是实例的私有属性，而不是继承而来的共享属性。

console.log(person.hasOwnProperty("name"));    //true
console.log(person.hasOwnProperty("school"));    //false

Object

Object.getPrototypeOf() ECMAScript 5中新增的方法，返回实例的原型。

console.log(Object.getPrototypeOf(person));    //Person{}

Object.keys() ECMAScript 5中新增的方法，返回一个包含所有可枚举实例属性的字符串数组。

console.log(Object.keys(person));    //["name"]
console.log(Object.keys(Person.prototype));    //["school", "sayName"]

Object.getOwnPropertyNames()返回所有实例属性，无论是否可枚举。

console.log(Object.getOwnPropertyNames(person));    //["name"]
console.log(Object.getOwnPropertyNames(Person.prototype));    //["constructor", "school", "sayName"]

操作符

delete删除一个configurable为true的私有属性。

delete person.name;
delete person.school;

console.log(person.name);    //undefined
console.log(person.school);    //HNU

for-in返回所有能够访问到的属性。

for (p in person) {
    console.log(p);    //name school sayName
}

in对象能够访问到属性时返回true

console.log("name" in person);    //true
console.log("sayName" in person);    //true
console.log("age" in person);    //false

同时使用hasOwnProperty()方法和in操作符，可以确定一个属性是存在于对象中还是存在于原型中。

function isPrototypeProperty(object, name) {
    if (!(name in object)) {
        return ("Can"t find " + """ + name + """);
    } else if (object.hasOwnProperty(name)) {
        return false;
    } else {
        return true;
    }
}

console.log(isPrototypeProperty(person, "name"));    //false
console.log(isPrototypeProperty(person, "school"));    //true
console.log(isPrototypeProperty(person, "age"));    //Can"t find "age"

instanceof用于判断一个对象是否是某个对象的实例。

console.log(person instanceof Person);    //true
console.log(person instanceof Object);    //true

转载请注明出处：https://segmentfault.com/a/1190000004561741

文章不定期更新完善，如果能对你有一点点启发，我将不胜荣幸。

云服务器 GPU云服务器匹配对象的属性和函数对象不支持属性或方法 javascript对象方法对象的属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78825.html

Javascript各种数组遍历方法归纳总结和兼容写法

摘要：主要用于枚举对象数组遍历效率最低的方法。当前数组元素的值。传递给函数的初始值注意对于空数组是不会执行回调函数的。前言 PS: 2018/04/26 优化一下排版,重新梳理一下方法,补充一些信息,删除JQuery库用法,只讲解Javascript自带的, for in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。主要用于枚举对象, 数组遍历效率最低的方法。 va...

Sanchi 2019-08-26 10:29 评论0 收藏0
js基础归纳总结1

摘要：局部变量在函数中声明的变量，会成为函数的局部变量。局部变量的作用域是局部的只能在函数内部访问它们。单独的情况下，指的是全局对象。在事件中，指的是接收事件的元素。布尔值提供一种布尔数据类型。所有不具有真实值的即为布尔值为零负零空值。闭包闭包的优点：1.可以读取函数内部的变量2.这些变量的值始终保持在内存中适用场景作用域作用域指的是有权访问的变量集合。在 JavaScript 中有...

Jeff 2019-08-26 13:54 评论0 收藏0
JavaScript知识架构学习路径（一）- 变量篇

摘要：在此，我们首先根据变量的作用域，将变量划分为三级，具体是全局变量局部变量和参数变量。【摘要】本文是专为JavaScript入门者而总结的，总体上将JavaScript的基础部分分成了九大块，分别是变量、运算符、数组、流程控制结构、字符串函数、函数基础、DOM操作基础、文档对象模型DOM和正则表达式。【关键字】变量、运算符、数组、流程控制结构、函数、DOM、正则表达式。本篇文章的主...

toddmark 2019-08-19 18:18 评论0 收藏0
jQuery学习和知识点总结归纳

摘要：目前在前端开发所占的比重越来越高，在我们学习和开发的过程中都会去使用。下面把程序员雷雪松对的知识点总结和归纳分享给大家。过滤对同胞元素的搜索。将匹配元素集合缩减为集合中的最后一个元素。返回指定元素相对于其他指定元素的位置。 jQuery目前在Web前端开发所占的比重越来越高，在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原...

JohnLui 2019-08-19 18:00 评论0 收藏0
一个关于对象引用的bug引发的对于引用类型及数组的简单思考

摘要：图示如下而对于引用类型的复制可不是这样这个复制只是将的引用赋值给，二者是属于同一个引用，访问的都是堆内存中的同一个对象，任何一个该引用的变量发生变化，会对其余使用该引用的变量也发生变化。这两天自己在写代码的时候，出现一个BUG，代码如下： class Car { constructor(carId) { this.position =...

lijinke666 2019-08-21 18:32 评论0 收藏0