资讯专栏INFORMATION COLUMN

JavaScript学习第七天笔记(面向对象)

Tychio / 1941人阅读

摘要:面向对象概述面向对象编程的全称是简称为。面向对象编程是用抽象方式创建给予现实世界模型的一种编程模式。构造函数构造函数又被称为构造器或对象模板,是创建对象的一个方法。

面向对象 概述

面向对象编程的全称是Object Oriented Programming,简称为OOP。面向对象编程是用抽象方式创建给予现实世界模型的一种编程模式。面向对象编程可以
面向对象编程的三个主要特征是:1.封装 2.继承 3.多态
所有的程序是由一定的属性和行为对象组成的 不同的对象的访问通过函数调用来完成 对象间所有的交流都是通过方法调用 通过对封装对象数据 提高复用率
JavaScript是一种基于原型的面向对象编程 而不是基于类的。

构造函数

构造函数又被称为构造器或对象模板,是创建对象的一个方法。

创建爱你构造函数

创建构造函数是用于创建对象
语法:
function 构造函数名称(){
this . 属性名 =属性值;
this . 方法名 = function(){

   方法体}

}
示例代码如下:

function HERO (){
this . name = "EVA";
this . sayMe = function (){
      console .log("this is eva")  
      }
}/*this关键字用于指代利用当前构造函数创建的对象*/
/*利用已经创建的构造函数创建对象*/
var hero = new Hero("shinji");
console.log(hero);
Object创建对象
// 表示创建一个空对象
var obj1 = new Object(null);
var obj2 = new Object(undefined);

// 表示创建一个与给定值对应类型的对象
var obj3 = new Object(100);
console.log(obj3);// [Number: 100]
var num = new Number(100);
console.log(num);// [Number: 100]

// 当以非构造函数形式被调用时,Object等同于new Object()
var obj4 = Object();// 函数调用
var obj5 = new Object();// 构造函数调用
Object类型 操作对象的属性 属性描述符

用于描述对象的值,控制其行为,例如该属性是否可写、是否可配置、是否可修改以及是否可美剧等
属性描述符有两种主要的形式:数据描述符和存取描述符

数据描述符

数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。数据描述符有以下可选的键值:
1.value:该属性对应的值 可以是任何有效的JaveScript值(数值 对象 函数等)默认为undefined
2.writable:当且仅该属性的writable为true时 value才能被赋值运算符改变 默认为false
3.configurable:当且该属性的configurable 为true时 该属性描述符才能够被改变 同时该属性也能从对应的对象上被删除 默认为false
4.enumerable:当且仅该属性的enumerable为true时 该属性才能够出现在对象的枚举属性中 默认为false

获取属性描述符
/*
    通过定义对象(属性或方法)这种方式
    * 属性默认都是数据描述符
 */
var obj = {
    name : "EVA"
}
/*
    使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
    * obj - 表示指定属性对应的目标对象
    * prop - 表示获取描述符的目标属性名称
    * 返回值 - 其属性描述符对象
  */
var result = Object.getOwnPropertyDescriptor(obj,"name");
console.log(result);
/*输出结果为 
{ value: "EVA",
  writable: true,
  enumerable: true,
  configurable: true }*/
设置属性描述符value
var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : "EVA"
}
/*
    Object.defineProperty(obj, prop, desc)方法
    * 作用
      * 用于定义目标对象的新属性
      * 用于修改目标对象的已存在属性
    * 参数
      * obj - 表示目标对象
      * prop - 表示目标对象的目标属性名称
      * desc - 表示属性描述符,必须是对象格式
        {
            value : 值
        }
    * 返回值 - 返回传递的对象
 */
Object.defineProperty(obj, "name", {
    value : "EVA02"
});
console.log(obj.name);// EVA02
/*
    同样都是为对象新增属性
    1.如果直接使用 "对象名.属性名 = 值" -> 可修改、可删除以及可枚举的
    2.如果使用Object.defineProperty()方法新增属性
      * 该新属性是不可修改、不可删除以及不可枚举的
 */
Object.defineProperty(obj, "age", {
    value : 18
});
console.log(obj.age);// 18

var result1 = Object.getOwnPropertyDescriptor(obj, "age");
console.log(result1);
// 一旦属性的值是不可修改的 - 如果执行修改操作时 -> 没有语法报错,但是无效
obj.age = 80;
console.log(obj.age);// 18

obj.job = "驾驶员";
var result2 = Object.getOwnPropertyDescriptor(obj, "job");
console.log(result2);
设置属性描述符writable
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
// 删除age属性值
delete obj.age;
console.log(obj.age);// undefined
设置属性描述符configurable
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;
console.log(obj.name);// 绫波丽
设置属性描述符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);
属性描述符存取器
var obj = {
    name : "碇真嗣"
}
var value;// 全局变量
Object.defineProperty(obj, "name", {
    // 获取指定的属性值
    get : function(){// 当获取或访问当前属性时,会调用get方法
        console.log("this is get function");
        /*
            类似于数据描述符中的value
            * get方法在被调用时,不能传递任何参数
            * get方法在被调用时,允许传递this关键字
              * this - 表示当前的目标对象(不能调用对象的当前目标属性)
          */
        return value;// 由于变量为初始化,调用时可能结果为 undefined
    },
    /*
        set方法用于定义当前目标属性的修改作用
        * 该方法接收唯一的一个参数 -> 作为当前目标属性的新的值
        * 通过属性修改操作指定的新的值 -> 作为形参对应的实参
     */
    set : function(newValue){
        console.log("this is set function: " + value);
        /*
            set方法在被调用时,允许传递this关键字
              * this - 表示当前的目标对象(不能调用对象的当前目标属性)
         */
        value = newValue;
    }
});
console.log(obj.name);// undefined

obj.name = "绫波丽";
console.log(obj.name);// 绫波丽
防篡改对象

定义的对面默认在任何时候 任何位置 无论有意义的还是无意义的都可以修改对象的属性或方法,而这些篡改可能会影响对象的内置属性或方法 从而导致对象的正常功能可能无法使用。JaveScript在ECWASScript5版本中新增了放置篡改对象的属性或方法的机制 共提供了三级保护方式:
1.禁止扩展:禁止为对象扩展新的属性或方法
2.密封对象:禁止扩展新的属性或方法 禁止配置现有的属性或方法的描述符 仅允许读写属性的值
3.冻结对象:禁止对对象执行任何修改操作

禁止扩展

禁止为对象扩展新的属性或方法

var obj = {};
// 将对象设置禁止扩展
Object.preventExtensions(obj);
// 新增属性或方法无效 -> 语法没有报错
obj.name = "张无忌";
console.log(obj);
/*
    Object.defineProperty()方法新增属性
    * 结果 - 报错
    * 信息 - TypeError: Cannot define property:name, object is not extensible.
 */
Object.defineProperty(obj, "name", {
    value : "周芷若"
});
console.log(obj);

/*
    Object.isExtensible(obj)方法
    * 作用 - 用于判断指定目标对象是否可扩展
    * 返回值
      * true - 表示指定目标对象是可扩展的
      * false - 表示指定目标哦对象是不可扩展的
 */
var result = Object.isExtensible(obj);
console.log(result);
密封对象

禁止扩展新的属性或方法,禁止配置现有的属性或方法的描述符,仅允许读写属性的值

var obj = {
    name : "张无忌" // 表示可修改
};
console.log(Object.getOwnPropertyDescriptor(obj, "name"));

/*
    将该对象进行密封
    1.不能为该对象新增属性或方法
    2.不能修改该对象的属性或方法的描述符
      * configurable
      * enumerable
  */
Object.seal(obj);

console.log(Object.getOwnPropertyDescriptor(obj, "name"));

/* 新增属性
obj.age = 18;
console.log(obj);
// 修改属性
obj.name = "周芷若";
console.log(obj);
*/

/*Object.defineProperty(obj, "age", {
    value : 18
});*/
Object.defineProperty(obj, "name", {
    value : "周芷若",
    writable : false, // 表示不可修改
    configurable : true,
    enumerable : false
});

console.log(Object.getOwnPropertyDescriptor(obj, "name"))

console.log(obj);

obj.name = "赵敏";
console.log(obj);
冻结对象

禁止对对象执行任何操作

var obj = {
    name : "张无忌"
}
// 冻结对象
Object.freeze(obj);

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

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

相关文章

  • 百度前端学院-基础学院-七天到第八天

    摘要:第五天到第六天的内容没有记笔记,不好不好。第七天到第八天的学习目标是学习布局的各种方式。主要包含相关和相关。定位的元素应该在文档流中的间隙不再存在绝对定位的元素不再存在于正常文档布局流程中。内容较多,请参考学习了容器项第五天到第六天的内容没有记笔记,不好不好。 第七天到第八天的学习目标是:学习布局的各种方式。主要包含position相关和Flexbox相关。 知识点: 1、默认情况下,块级元...

    zombieda 评论0 收藏0
  • 26天学通前端开发(配资料)

    摘要:网上有很多前端的学习路径文章,大多是知识点罗列为主或是资料的汇总,数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告,发送获取资料,就能收到下载密码,网盘地址在最下方,获取教程和案例的资料。 前言 好的学习方法可以事半功倍,好的学习路径可以指明前进方向。这篇文章不仅要写学习路径,还要写学习方法,还要发资料,干货满满,准备接招。 网上有很多前端的学习路径文章,大多是知...

    blair 评论0 收藏0
  • 七天-《企业应用架构模式》-分布策略

    摘要:分布对象的诱惑中间件的对象分布对上层透明崔然非常有用,但跨进程跨机器还有网络调用,影响性能远程接口和本地接口远程访问的对象需要使用粗粒度接口,而本地访问的对象需要使用细粒度接口优化性能时,本地接扣可以提供粗粒度对象基于,就不能把在单进程中设 1. 分布对象的诱惑: 中间件的对象分布对上层透明崔然非常有用,但跨进程、跨机器(还有网络)调用,影响性能! 2. 远程接口和本地接口:   1)...

    alin 评论0 收藏0
  • 百度前端学院-基础学院-七天到第八天之BFC

    摘要:简介全称中文为块级格式化上下文。特征总之记住一句话元素特征表现原则就是内部元素无论怎么翻江倒海,都不会影响外部元素。如何触发,常见如下的值不为的值为,或。的值不为和需掌握自适应模块布局内容很多,具体参考1、BFC简介 BFC全称block formatting context,中文为块级格式化上下文。特征总之记住一句话: BFC元素特征表现原则就是:内部元素无论怎么翻江倒海,都不会影响外部元...

    junfeng777 评论0 收藏0
  • AI开发书籍分享

    摘要:编程书籍的整理和收集最近一直在学习深度学习和机器学习的东西,发现深入地去学习就需要不断的去提高自己算法和高数的能力然后也找了很多的书和文章,随着不断的学习,也整理了下自己的学习笔记准备分享出来给大家后续的文章和总结会继续分享,先分享一部分的 编程书籍的整理和收集 最近一直在学习deep learning深度学习和机器学习的东西,发现深入地去学习就需要不断的去提高自己算法和高数的能力然后...

    huayeluoliuhen 评论0 收藏0

发表评论

0条评论

Tychio

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<