JavaScript对象的深入理解（一）

UCloud 发布于2019-08-22 11:11 / 1339人阅读

摘要：构造函数模式如果要创建许多对象，传统方法存在以下问题对象名太多，容易搞重复新建一个对象就要全部重写属性和方法，过于复杂无法发挥的面向对象优势继承由于本身没有类的概念，因此诞生了构造函数模式来创建对象，该方法利用函数创建对象。

对象，一种数据类型。对象是属性(变量)和方法(函数)结合在一起的数据实体

对象的出现，就是为了解决封装的问题。可以将许多属性与方法封装在一个对象里，方便调用，也符合人的思考方式。

JavaScript中创建对象的基本方法

创建Object实例，再添加属性和方法

var person = new Object();
    person.name = "Jonathan";
    person.age = 23;
    person.job = "Developer";
    person.sayName = function () {
    console.log(this.name);
};

对象字面量方法
由于上述写法繁琐，故出现了对象字面量方法创建对象。

var person = {
    name: "Jonathan",
    age: 23,
    job: "Developer",
    sayName: function () {
        console.log(this.name);
    }
};

console.log(person.name); //Jonathan
person.sayName(); //Jonathan

这样一来，就把属性和方法封装进了一个对象中，方便调用。

构造函数模式

如果要创建许多对象，传统方法存在以下问题

对象名太多，容易搞重复

新建一个对象就要全部重写属性和方法，过于复杂

无法发挥JavaScript的面向对象优势（继承）

由于JavaScript本身没有类的概念，因此诞生了构造函数模式来创建对象，该方法利用函数创建对象。由于函数本身也是对象，因此可以这么操作。
构造函数创建对象的方法是：

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
                       console.log(this.name);
                   };    
}
        
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

要点：

构造函数命名应以大写字母开头（约定俗成的规矩）

构造函数本身也是函数，只不过是用来创建对象的

要创建对象的实例，必须要用new操作符，否则跟调用函数无异。

任何函数，只要通过new操作符来调用，它就可以作为构造函数。

至此，一个Person对象的创建就完成了，它有以下优点：

新建对象只用给函数提供参数，简化了创建。

有了实例的概念，如Person1就是Person的实例。无形之中给对象归了类。

更好的体现了封装，创建对象只用给参数，不用关心对象内部细节。

但用构造函数模式的方法创建对象并不是完美的，它存在以下问题，即：
每个方法（对象内置函数）都要在实例上重新创建一遍
构造函数也可以用以下方法定义，方便我们发现问题

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function(console.log(this.name));
    };    
}
        
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

console.log(person1.sayName == person2sayName); //false

在新建对象person1和person2时，分别新建了两个不同的方法person1.sayName()和person2.sayName()。
但这很没有必要，只需要公用一个sayName()方法就好了。为了解决上述问题，诞生了原型模式

GPU云服务器云服务器深入理解javascript 深入理解系列深入理解linux 深入理解webrtc

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

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

深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
编写高质量Javascript的要点-Review深入理解Javascript系列(一)

摘要：编写高质量的要点深入理解系列一知识点最小全局变量全局变量命名易与第三方的脚本引起冲突所以尽可能少的使用全局变量是很重要的相关策略有命名空间模式或是函数立即自动执行，但是要想让全局变量少最重要的还是始终使用来声明变量。 Title: 编写高质量Javascript的要点-Review深入理解Javascript系列(一)date: 2017-6-9 14:14:20 status: p...

wh469012917 2019-08-21 11:44 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
深入理解JavaScript系列9:S.O.L.I.D五大原则之接口隔离原则

摘要：前言本章我们要讲解的是五大原则语言实现的第篇，接口隔离原则。接口隔离原则和单一职责有点类似，都是用于聚集功能职责的，实际上可以被理解才具有单一职责的程序转化到一个具有公共接口的对象。与我们下面讨论的一些小节是里关于违反接口隔离原则的影响。前言本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第4篇，接口隔离原则ISP（The Interface Segreg...

piglei 2019-08-19 17:22 评论0 收藏0
深入理解JavaScript系列11:根本没有“JSON对象”这回事

摘要：更多资料如果你想了解更多关于的资料，下面的连接对你绝对有用关于本文本文转自大叔的深入理解系列。深入理解系列文章，包括了原创，翻译，转载，整理等各类型文章，原文是大叔的一个非常不错的专题，现将其重新整理发布。前言写这篇文章的目的是经常看到开发人员说：把字符串转化为JSON对象，把JSON对象转化成字符串等类似的话题，所以把之前收藏的一篇老外的文章整理翻译了一下，供大家讨论，如有错误，...

darryrzhong 2019-08-19 17:23 评论0 收藏0