首页 web前端 js教程 js中面向对象以及Object类型的简单介绍(附代码)

js中面向对象以及Object类型的简单介绍(附代码)

Aug 15, 2018 pm 01:42 PM
javascript

本篇文章给大家带来的内容是关于js中面向对象以及Object类型的简单介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

面向对象

面向对象编程的全称为Object Oriented Programming,简称OOP。面向对象编程是用抽象方式创建基于现实世界模型的一种编程方式。
面向对象编程可以看做是使用一系列对象相互协作的软件设计。面向对象编程的三个主要特征是:封装、继承、多态。

封装

所谓封装就是按照要求使用并得到对应的结果,而不需要知道真实的执行原理。
封装主要用于阐述对象中包含的(封装的)内容,通常有两部分组成

  • 相关的数据(用于存储属性)

  • 基于这些数据所能做的事

继承继承通常是指类与类之间的关系。如果两个类有相同的属性或方法,那么可以让一个类继承另一个类,就不需要再次定义相同的属性或方法。
创建一个或多个类的专门版本类方式称为继承(JavaScript只支持单体继承)。创建的专门版本的类通常叫做子类,另外的类通常叫做父类。

多态

不同的对象可以定义相同名称的方法,方法作用于所在的对象中。这种不同对象通过相同方法的调用实现各自行为的能力,被称之为多态。

构造函数

构造函数又被称为构造器或对象模板,是对象的一个方法,在实例化时构造器被调用。在JavaScript中函数就可以作为构造器使用。

/*  创建构造函数->用于创建对象
*    function 构造函数名称(){
*       this.属性名 = 属性值
*       this.方法名 = function(){
*           方法体
*           }
*     }
      this关键字指代利用当前构造函数创建的对象*/
function Dog() {//这是构造函数,构造函数的属性和方法使用this关键字
    this.name=function () {
        console.log('哈士奇')
    }
}

/*   利用构造函数创建对象*/
var dog = new Dog();
console.log(dog);
登录后复制

Object类型

属性描述符

JavaScript提供了一个内部数据结构,用于描述对象的值,控制其行为,例如该属性是否可写,是否可配置,是否可删除,是否可枚举等,这个内部数据结构被称为属性描述符。
对象里目前存在的属性描述符主要有两种形式:数据描述符和存取描述符。

数据描述符

数据描述符是一个具有值的属性,该值可能是可写的,也可能是不可写的。数据描述符具有以下可选键值:

  • value:该属性对应的值。可以是任何有效的JavaScript值。默认为undefined、

  • writable:当且仅当属性的writable为true时,value才能被赋值运算符改变。默认为false。

  • configurable:当且仅当该属性的configurable为true时,该属性描述符才能被改变,同时该属性也能从对应的对象上被删除。默认为false。

  • enumerable:当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中,默认为false。

存取描述符

存取描述符是由getter-setter函数对描述的属性。有以下可选键值

  • get:给属性提供getter的方法,如果没有getter则为undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象。

  • set:给属性提供setter的方法,如果没有setter则为undefined。当属性修改时,触发执行该方法。该方法接受唯一参数,即改属性新的参数值。

  • configurable:当且仅当该属性的configurable为true时,该属性描述符才能被改变,同时该属性也能从对应的对象上被删除。默认为false。

  • enumerable:当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中,默认为false。

获取属性描述符

Object.getOwnPropentyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符

var obj = {
    name : '哈士奇'
}
/*
    使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
    * obj - 表示指定属性对应的目标对象
    * prop - 表示获取描述符的目标属性名称
    * 返回值 - 其属性描述符对象
    * 如果
  */
var v =Object.getOwnPropertyDescriptor(obj,'name');
console.log(v)
登录后复制

设置属性描述符可选键值value

  • Object.deginepropety()方法为对象定义新属性或修改现有属性,并返回该对象。

var obj ={//定义对象时定义的属性是可以修改、删除、枚举的
    name : '阿拉斯加'
}
/*
    Object.defineProperty(obj, prop, descriptor)方法
    * 作用
      * 用于定义目标对象的新属性
      * 用于修改目标对象的已存在属性
    * 参数
      * obj - 表示目标对象
      * prop - 表示目标对象的目标属性名称
      * descriptor - 表示属性描述符,必须是对象格式
        {
            value : 值
        }
    * 返回值 - 返回传递的对象
 */
//修改name属性
Object.defineProperty(obj, 'name',{
    value:'哈士奇'
} );
console.log(obj.name);//哈士奇

/*
    同样都是为对象新增属性
    1.如果直接使用 "对象名.属性名 = 值" -> 可修改、可删除以及可枚举的
    2.如果使用Object.defineProperty()方法新增属性
      * 该新属性是不可修改、不可删除以及不可枚举的
 */
//新增age属性//用该方法新增的属性默认是不可以修改、删除、枚举的
Object.defineProperty(obj,'age',{
    value : 2
});
登录后复制
  • Object.degineproperties()方法为对象定义一个或多个新属性或修改现有属性,并返回该值。

设置属性描述符可选键值weitable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : false // 不可修改
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 周芷若

Object.defineProperty(obj, 'age', {
   value : 18,
   writable : true
});
console.log(obj.age);// 18
// 修改age属性值
obj.age = 80;
console.log(obj.age);// 80
登录后复制

设置属性描述符可选键值configuarble

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : true, // 控制当前属性是否可被修改
    configurable : true // 控制当前属性是否可被删除
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 赵敏
// 删除name属性值
delete obj.name;undefined
console.log(obj.name);// undefined
登录后复制

设置属性描述符enumerable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    enumerable : false
});
console.log(obj.name);// 周芷若
/*
    属性描述符enumerable - 控制当前属性是否可被枚举(遍历)
    * 仅能循环遍历对象中可被枚举的属性
      * for...in语句
      * keys()方法
    * 可以循环遍历对象中可被枚举和不可被枚举的属性
      * getOwnPropertyNames()方法
 */
for (var i in obj) {
    console.log(i);
}
var result1 = Object.keys(obj);
console.log(result1);
var result2 = Object.getOwnPropertyNames(obj);
console.log(result2);
登录后复制

设置属性描述符存取器

对象中的属性除了可以直接定义外,还可以用存取器进行定义。setter为取值函数,使用属性描述符中的set;getter为取值函数,使用属性描述符中的get。

var value;
var obj = {
    // 存取描述符中的get
    get attr() {// 表示当前目标属性名称
        return value;
    },
    // 存取描述符中的set
    set attr(newValue) {// 表示当前目标属性名称
        console.log('setter: ' + newValue);
        value = newValue;
    }
}
console.log(obj.attr);// undefined
obj.attr = 100;// "setter: 100"
登录后复制

防篡改对象

定义的对象默认在任何时候任何位置都可以随意修改,所以添加了防止篡改的机制分为三个级别

  • 禁止扩展:禁止为对象扩展新的属性和方法

  • 密封对象:只允许读写属性的值

  • 冻结对象:禁止任何操作

禁止扩展

  • Object.preventExtensions()设置指定对象不可扩展

  • Object.isExtensible()判断一个对象是否可以扩展

密封对象

  • Objet.seal()方法用于密封一个对象,防止添加新属性并将现有属性标记为不可配置,当前属性的值可写。

  • Object.Sealead()判断对象是否被密封

冻结对象

  • Object.freeze()用于冻结一个对象,无法对这个对象进行任何操作,只可读

  • Object.isFrozen()判断对象是否被冻结

相关推荐:

Javascript 面向对象 对象(Object)_js面向对象

JS中Object对象的原型的使用方法

JavaScript面向对象-简单对象的创建和JSON对象

以上是js中面向对象以及Object类型的简单介绍(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1666
14
CakePHP 教程
1426
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1253
24
如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

javascript中如何使用insertBefore javascript中如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数:要插入的新节点和参考节点(即新节点将要被插入的位置的节点)。

JavaScript和WebSocket:打造高效的实时图像处理系统 JavaScript和WebSocket:打造高效的实时图像处理系统 Dec 17, 2023 am 08:41 AM

JavaScript是一种广泛应用于Web开发的编程语言,而WebSocket则是一种用于实时通信的网络协议。结合二者的强大功能,我们可以打造一个高效的实时图像处理系统。本文将介绍如何利用JavaScript和WebSocket来实现这个系统,并提供具体的代码示例。首先,我们需要明确实时图像处理系统的需求和目标。假设我们有一个摄像头设备,可以采集实时的图像数

See all articles