javascript之面向对象总结

taowen 发布于2019-08-22 15:56 / 1813人阅读

摘要：之面向对象总结前言在中是没有类的概念的，所以它的对象与基于类的语言中的对象不同。一理解对象张三上面通过构造函数创建了一个对象，并为它添加了三个属性。

JavaScript之面向对象总结 前言：在ECMAScript中是没有类的概念的，所以它的对象与基于类的语言中的对象不同。ECMA-262把对象总结为：“无序属性的集合，其属性包含基本值、对象或者函数”。 一、理解对象

var person = new Object();
person.name = "张三";
person.age = 15;

person.say = function(){
    alert("hello");
}

上面通过Object构造函数创建了一个对象，并为它添加了三个属性。

ECMA对象的属性有两种：数据属性和访问器属性。

var person = {
    name: "聂赫留朵夫", // 数据属性
    age: 25
}
Object.defineProperty(person, "year", { // 访问器属性
    get: function(){
        return 1922;
    },
    set: function(value){
        this.age = 25 + value;
    }
})

数据属性：包含一个数据值的位置，可以再这个位置写入和读取值

数据属性有4个描述其行为的特性：

[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，默认为true

[[Enumerable]]：表示能否通过for-in循环返回属性，默认为true

[[Writeable]]：表示能否修改属性，默认为true

[[Value]]：包含这个属性的数据值，默认值为undefined

ps:要修改默认的特性，必须使用Object.defineProperty

访问器属性：包含一对儿getter和setter函数，不包含数据值

访问器属性也有4个特性：

[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，默认为true

[[Enumerable]]：表示能否通过for-in循环返回属性，默认为true

[[Get]]：读取属性时调用的函数，默认值为undefined

[[Set]]：写入属性时调用的函数，默认值为undefined

访问器属性不能直接定义，必须通过Object.defineProperty来定义

读取属性的特性，通过Object.getOwnPropertyDescriptor方法 二、创建对象

1、通过字面量或者Object构造函数

var person = {
    name: "尤瓦尔•赫拉利"
}
var car = new Object();
car.name = "法拉利"

优点：不清楚
缺点：使用同一个接口，会产生大量的代码

2、工厂模式

function createPerson(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    return o;
}
var p1 = createPerson("方鸿渐", 14);
var p2 = createPerson("墨带", 20);

优点：解决了创建多个相似对象的问题
缺点：很明显，你不知道创建的对象的类型是什么

3、构造函数模式

function Person(name, age){
    this.name = name;
    this.age = age;
}
var person = new Person("智人", 25);

创建实例，必须要通过new关键字，new调用经历的步骤：

创建一个新的对象

将构造函数的this指向新的对象

执行构造函数中的代码

返回新对象

优点：可以将每个实例都标识为一种特定的类型
缺点：每个方法都要在实例上重新创建一遍

4、原型模式

function Person(){}
Person.prototype.name = "凯撒大帝";
Person.prototype.age = 500;

var p1 = new Person();
console.log(p1.name); // 凯撒大帝
var p2 = new Person();

特点：所有的属性都是被很多实例共享的，但这个也是一个缺点。这个共享对于函数来说挺好，对于基本类型来说也还可以（实例上添加的同名属性可以覆盖原型上的），但是对于引用类型来说就是比较突出的问题了（修改一个，其余的也会被修改）。另外，这个模式省略了为构造函数传参的方便。

5、构造函数模式和原型模式组合使用

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function(){
    alert(this.name);
}
var p = new Person("贝多芬", 200);

这种是比较通用的一种方式，结合了构造函数模式和原型模式的优点，但是这种方式可能对于写OO语言的人来说，有点儿不友好，毕竟这种写法有点儿独特。

6、动态原型模式

function Person(name, age){
    this.name = name;
    this.age = age;
    if (typeOf this.sayName !== "function") {
        Person.prototype.sayName = function(){
            alert(this.name);
        }
    }
}

这种模式的好处是把所有的属性全部都封装到一个函数里面，但是会对函数做一个检测，没有的情况下才会去创建

7、寄生构造函数模式

function Person(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.printName = function(){
        console.log(this.name);
    }
    return o;
}
var p = new Person("贝多芬", 55);

这个模式的一个适用场景是改写原生的对象

8、使用es6

class Person {
    constructor(name){
        this.name = name;
    }
    printName(){
        console.log(this.name);
    }
}
const p = new Person("巴菲特")

专线服务混合云 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

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

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

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
面向对象之三个基本特征（javaScript）

摘要：对象是公布其接口。节选自百度百科我对于封装的理解，可能还有一个步骤就是抽离，首先你要清楚在一个对代码中你应该抽离那些属性方法，有了这些为基础才能更好的做好封装。节选自百度百科因为是没有重载的概念的所以要自己编写逻辑完成重载。 1. 前言 2. 封装 3. 继承 4. 多态 5. 总结 1. 前言了解过面向对象的同学应该都知道，面向对象三个基本特征是：封装、继承、多态，但是对于这三...

IamDLY 2019-08-23 15:23 评论0 收藏0