js高级程序设计学习-OOP

导言

面向对象(OO)语言有一个标示, 那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。前面提到过, ES 中没有类的概念, 因此它的对象也与具有类的语言中的对象不同。

理解对象

创建一个自定义对象的最简单的方式就是创建一个 Object 的实例, 然后再为它添加属性和方法

var person = new Object();
person.name = 'zs';
person.age = 23;

早期的js开发人员经常使用这个模式创建新对象,后面,对象字母量成为创建这种对象的模式。

var person = {
    name : 'zs',
    age : 23,
    sayName : function () {
        console.log(this.name)
    }
}

属性类型

ES中有两种属性:数据属性和访问器属性

1.数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述行为的特性:

  • Configurable : 表示能否通过 detele 删除属性从而重新定义属性 , 能否修改属性的特性, 或者能否把属性修改为访问器属性 。默认是 true
  • Enumerable : 表示能否通过 for-in 循环返回属性。 默认为 true
  • Writable : 表示能否修改属性的值。 默认为 true
  • Value : 包含这个属性的数据值, 默认为 undefined

要修改属性默认的特性 , 必须使用 ES5 的 Object.defineProperty()方法。

var person = {};
Object.defineProperty(person, "name", {
    writable : false,
    value : 'zs'
})
console.log(person.name); // 'zs'
person.name = 'hw'
// 不可修改
console.log(person.name); // 'zs'

把writable 设置为 false。 这个属性的值是不可修改的,在非严格模式下,赋值操作将被忽略;在严格模型下,将报错。

var person = {};
Object.defineProperty(person , 'name', {
    configurable : false,
    value : 'zs'
})
console.log(person.name)
delete person.name;
console.log(person.name)

把 configurable 设置为 false , 表示不能从对象中删除属性。 一旦把属性定义为不可配置的,就不能再把它变回可配置了。此时,再调用 Object.defineProperty()方法修改除了 writable 之外的特性

在调用 Object.defineProperty()方法创建一个新的属性时,如果不指定,configurable, enumrable 和 writable 特性的默认值都是 false

2.访问器属性

访问器属性不包含数据值; 他们包含一对 getter 和 setter 函数。 访问器属性有如下4个特性:

  • Configuable : 表示通过 delete 删除属性从而重新定义属性 , 能否修改属性的特性 , 或者能否把属性修改为数据属性, 特性为默认值为 true
  • Enumerable : 表示能否 通过 for-in 返回循环。 默认为 true
  • GET : 默认为 undefined
  • SET : 默认为 undefined

定义多个属性

由于为对象定义多个属性的可能性很大 , ES5 又定义了一个 Object.defineProperties()方法。 利用这个方法可以通过描述符一次定义多个属性。 这个方法接收两个对象参数:

  • 第一个对象是要添加和修改的其属性的对象
  • 第二个对象的属性和第一个对象中要添加或修改的属性

读取属性的特性

使用 ES5 的 Object.getOwnPropertyDescriptor()方法, 可以获取给定属性的描述符。这个方法接收两个参数 : 属性所在的对象和要读取其描述符的属性名称

var book = {};
Object.defineProperties(person, {
    _year : {
        writable : true,
        value : 2004
    },
    edition : {
        writable : true,
        value : 1
    },
    year : {
        get : function() {
            return this._year;
        },
        set : function(newValue) {
            if(newValue > 2004) {
                this._year = newValue;
                this.edition += newValue;
            }
        }
    }
})
var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
console.log(descriptor);
//{ value: 2004, writable: true, enumerable: false, configurable: false }
创建对象

虽然 Object 构造函数或对象字母量都可以用来创建单个对象 , 但这些方式有个明显的缺点 : 使用同一个接口创建很多对象 , 会产生大量的重复代码。 为解决这个问题 , 我们可以使用工厂模式的一种变体。

工厂模式

function createPerson(name , age ,job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        console.log(this.name)
    }
    return o;
}

构造函数模式

ES中构造函数可用来创建特点类型的对象。 像 Object 和 Array这样。此外 , 也可以创建自定义的构造函数, 从而定义对象类型的属性和方法。例如:

function Person(name , age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        console.log(this.name)
    }
}
var p1 = new Person('zs',29,'sf');

通过 new 操作符。 以这种方式调用构造函数实际上会经历以下 4 步:

function mynew(Con , ...args) {
    var obj = {};
    obj.__proto__ = Con.prototype;
    let res = Con.apply(obj , args);
    return res instanceof Object ? res : obj;
}
  • 创建一个新对象
  • 将构造函数的作用域赋给新对象
  • 执行构造函数值的代码
  • 返回新对象
原文链接:juejin.im

上一篇:自己把web应用丢到服务器上,告别求助后端(单页应用与服务端渲染)
下一篇:基于Vue2.6搭建UI组件库+VuePress搭建文档

相关推荐

  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    2 个月前
  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    3 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    1 个月前
  • 😉我用 Nuxt.js 仿了个掘金

    前言 首先肯定是要夸夸掘金啦,最开始从 CSDN 到 博客园 再到 掘金,个人感觉掘金的技术氛围非常的nice,真是个宝藏社区👏。技术文章大多以前端为主,对前端开发者非常友好,质量也是歪瑞古的。

    2 个月前
  • 😀一个原生js弹幕库

    danmujs 😀一个原生js弹幕库,基于 CSS3 Animation 地址、核心代码 本项目基于 rcbullets,项目约70%的代码基于rcbullets,首先要感谢这个项目的作者,如...

    5 个月前
  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的“类“究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​ 面向...

    3 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    (/public/upload/f204a3b224d986128f1b4d9b8d06cd17) 前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Git...

    4 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ image.png(/public/upload/04aaa24e...

    3 个月前
  • (干货👍)从详细操作js数组到浅析v8中array.js

    前言 最近在写面试编程题,经常用到数组,经常想偷个懒,用它提供的方法,奈何还是对数组方法使用不熟练,导致写了很多的垃圾代码,很多地方稍加修改的话肯定变得简洁高效优雅👊 所以✍这篇文章本着了解一下Ja...

    8 天前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前

官方社区

扫码加入 JavaScript 社区