第172天:面向对象基本知识点

简介: 一、构造函数和普通函数的区别在命名规则上,构造函数一般是首字母大写,普通函数遵照小驼峰式命名法。在函数调用的时候:function fn() { }     构造函数:1. new fn( )                     2 .

一、构造函数和普通函数的区别

在命名规则上, 构造函数一般是 首字母大写普通函数遵照小驼峰式命名法。
在函数调用的时候:
function fn() { }
      构造函数:1. new fn( )
                     2 .构造函数内部会创建一个新的对象,即 f的实例
                     3. 函数内部的 this指向 新创建的f的实例
                     4. 默认的返回值是 f的实例
      普通函数1. fn( )
                     2. 在调用函数的内部不会创建新的对象
                     3. 函数内部的 this指向 调用函数的对象(如果没有对象调用,默认是 window
                     4. 返回值由 return语句决定
 
  构造函数的返回值
     有一个默认的返回值, 新创建的对象(实例)
     当手动添加返回值后( return语句):
          1. 返回值是 基本数据类型-->真正的返回值还是那个新创建的对象(实例)
          2. 返回值是 复杂数据类型(对象)--> 真正的返回值是这个对象

二、Get/Set访问器

语法:

Object.defineProperty(obj, prop, descriptor)

参数:

obj:目标对象

prop:需要定义的属性或方法的名字。

descriptor:目标属性所拥有的特性。

可供定义的特性列表:

  • value:属性的值
  • writable:如果为false,属性的值就不能被重写。
  • get: 一旦目标属性被访问就会调回此方法,并将此方法的运算结果返回用户。
  • set:一旦目标属性被赋值,就会调回此方法。
  • configurable:如果为false,则任何尝试删除目标属性或修改属性以下特性(writable, configurable, enumerable)的行为将被无效化。
  • enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。
 1 Object.defineProperty(this, "price", {
 2     get: function () {return price*0.9;},
 3     set: function (value) {
 4         /*大概普通产品的价格都在0--1万*/
 5         if(value>10000)
 6         {
 7             alert('产品价格必须在0--1万之间');
 8         }else{
 9             price = value;
10         }
11     }
12 });

 

1 function Person() {  
2     var age = new Date().getFullYear() - 18;  
3     Object.defineProperty(this, "age", {  
4         get: function () { alert("内部存储数据为:" + age); return new Date().getFullYear() - age; },  
5         set: function (value) { age = value; }  
6     });  
7 }  

使用一下代码进行测试:

1 var p = new Person();  
2 p.age = 1994;  
3 alert("外部获取到的数据为:" + p.age);  

 三、函数声明和函数表达式的区别

函数声明是可以提升的,而函数表达式不可以提升

当我们定义一个函数表达式,在这个表达式前面是访问不到的。

1 //函数声明,变量fn以及其实现被提升到顶部
2 function fn(){
3     console.log('函数')
4 }
5 //函数表达式,仅变量fn2被提升到顶部,实现没有被提升
6 var fn2 = function(){
7     console.log('函数变量形式')
8 }

四、设置某个属性是否可写

1 /*我们的需求:自动计算打折后的价格*/
2 Object.defineProperty(this, "price", {
3     value:5000000,
4     writable: false,
5 });

 

相关文章
|
10月前
|
PHP
23 七天免登录案例
路老师分享了PHP语言的知识,帮助大家入门并深入了解PHP。本文通过一个“七天免登录”的案例,详细介绍了从创建用户表、登录页面到登录检测和退出登录的完整过程。代码示例详尽,适合初学者学习。
169 2
|
缓存 JavaScript 前端开发
【性能革命!】Vue 3事件监听缓存的奥秘 —— 揭开前端优化的神秘面纱,让应用性能飙升的秘密武器!
【8月更文挑战第7天】随着前端应用日益复杂,性能优化变得至关重要。Vue 3 通过引入事件监听缓存等新特性提升了应用性能。此特性避免了重复注册相同的事件监听器,减少了资源浪费和潜在的内存泄漏问题。在 Vue 3 中,事件监听器首次渲染时注册,并在后续渲染中重用,除非组件状态变更或手动更新。通过一个示例组件展示了如何利用该特性优化性能,包括使用 `watchEffect` 或 `watch` 在状态变化时重新注册监听器。这一机制降低了浏览器负担,减少了内存占用,提高了应用响应速度,尤其对大型应用效果显著。合理运用事件监听缓存能够构建出更加流畅的应用体验。
605 3
|
JavaScript
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
265 2
|
存储 Swift
Swift 语言:什么是闭包(Closure)?它们与函数的区别是什么?
Swift 语言:什么是闭包(Closure)?它们与函数的区别是什么?
307 1
|
IDE Java Maven
spring boot的项目启动方式有几种及详解?
spring boot的项目启动方式有几种及详解?
|
JavaScript Ubuntu 编译器
windows下安装make,使用makefile文件
windows下安装make,使用makefile文件
1422 0
Elasticsearch离线文档安装部署教程(Elastic认证考试版)
此文档是针对Elastic认证考试而提供的 7.13 版本离线文档安装教程 如需下载最新版本,或指定版本,戳: Elasticsearch离线文档(支持选择版本)安装部署教程 鉴于备考环境需要经常访问官方文档,而官方访问速度齁慢齁慢。特此给出官方文档离线版食谱,各位客官细细品尝。
Elasticsearch离线文档安装部署教程(Elastic认证考试版)
python-turtle(海龟绘图)圣诞树
前言: 1.在开始前需要引入turtle库,若没有下载这个库可以复制下面这条语句在PyCharm终端下载 pip install turtle 2.turtle库,它这个画笔是在这个窗口横轴x轴,纵轴y轴从原点(0,0)处开始,以函数指令使其移动绘图。 正文: 一:开始前引入所需的库 # turtle as t 是将turtle替换为t import turtle as t # 随机库 import random # 引入turtle库中的所有用法 from turtle import * 二:设置窗口属性和RGB颜色属性以及绘图数度 # 设置窗口大小和背景颜色 t.screensize(80
python-turtle(海龟绘图)圣诞树
|
Dart API
带你读《深入浅出Dart》二十九、Flutter网络请求(1)
带你读《深入浅出Dart》二十九、Flutter网络请求(1)
192 0
|
前端开发 easyexcel Java
前后端分离项目知识汇总(阿里云OSS,EasyExcel)
前后端分离项目知识汇总(阿里云OSS,EasyExcel)
447 0