JavaScript进阶之路(一)初学者的开始

news2024/12/23 17:58:23

一:写在前面的问题和话

一个javascript初学者的进阶之路!

背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般。学习资料:犀牛书。

如有误导,或者错误的地方,欢迎大神在评论区说明,指正。不接受无端的漫骂!!!!

二:正文 Javascript的面向对象

面向对象:封装,继承,多态。

上面先不说,我们学习后端语言的时候,老师都会告诉我们,对象是什么,比如,老师会说,对象你可以理解成为你的女朋友(对象),你女朋友的年龄,名字,职业,罩杯都是他的属性。

比如这段代码:

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Cup { get; set; }
}

那么JavaScript里面的对象是什么呢?

//方式1
var person = new object();
person.name='柳岩';
person.age= 27;
person.Cup='17D';
 
//方式2
var person={
    name:'柳岩',
    age:27,
    Cup:'17D'
};

这是JavaScript创建对象最简单的方式,也是我们后端人员最常用的创建对象的方式。

这个时候,项目经理提要求了,我不管,名字必须只读,不可修改。在C#中可以通过只给属性get方法或者给字段readonly等方法来实现只读。JS怎么办呢?

var person = {
    name: '柳岩',
    age: 27,
    Cup: '17D'
};
 
Object.defineProperty(person, "name", {
    writable: false
});
person.name = "春哥";
console.log(person.name);

这样就实现了属性的只读。顺带说一句,这个方法IE8以下无效。IE8也有很多限制。如果遇到移动项目,大可以这么写。如果是其他需要兼容低版本浏览器的项目,咱们还是老老实实的约定一下,写个注释算了。毕竟不是特别重要的东西。

当然也可以用get;set;来写,同样不支持IE8及以下。

我就随便瞎写一下,反正就是这个意思,大家明白就行。勿喷勿喷。

上面就是Javascript的对象,以及创建对象最简单的2种方式。接下来说说实际应用中是怎么创建对象,还有那些方式可以创建对象

1:最常用的模式

var Person = function (name,age,cup) {
    this.name = name;
    this.age = age;
    this.cup = cup;
    this.showCup = function () {
        console.log(this.name + ":" + this.cup);
    };
};
 
var liuyan = new Person("柳岩", 27, "17D");
liuyan.showCup();

讲道理,上面的模式很眼熟,这不就是C#中创建对象的方式么,还是3个参的构造函数!所以这种方式(构造函数)大概是实际应用中最常见的形式。

2:不常用?的模式

原型模式:

var Person = function () { };
Person.prototype.name = "柳岩";
Person.prototype.age = "27";
Person.prototype.cup = "17D";
Person.prototype.showCup = function () {
    console.log(this.name + ":" + this.cup);
};
var liuyan = new Person();
liuyan.showCup();

好了,到这为止我们需要了解以下原型到底是个啥。

先记住下面两句话

a:原型就是你创建一个新函数,这个函数就会自动创建一个prototype属性,这个属性指向函数的原型对象。

b:然后原型prototype中有一个constructor的默认构造函数,这个构造函数,可以参照上面的构造函数创建对象的例子,他代表Person对象。

好了,有啥用呢?看下面的代码,我们再解释

看到上面的代码,原型对象和Person对象是否就明白了?

添加新的属性,如果和原型的属性同名,只会把访问的优先级放到新的属性上,当我们删除新的属性时,就又可以访问到原型的属性上了;

这个时候,我们是不是可以说原型对象就是最初的默认对象,而Person对象就是实例化的对象呢?我不知道,希望大牛解释下咯。

以上是我的理解!

3:组合使用构造函数和原型模式来创建对象

var Person = function (name, age, cup) {
    this.name = name;
    this.age = age;
    this.cup = cup;
    this.showCup = function () {
        console.log(this.name + ":" + this.cup);
    };
};
 
Person.prototype = {
    constructor: Person,
    showCup: function () {
        console.log(this.name + ":" + this.cup);
    }
};
 
var liuyan = new Person("柳岩",27,"17D");
var chunge = new Person("春哥", 27, "1A");
liuyan.showCup();
chunge.showCup();

 

对,想的没错,把默认构造函数constructor改成自己写的就可以了.

好了,这篇文章就讲到这吧。下篇文章学习一下javascript的继承

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/579857.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Git日常使用技巧 - 笔记

Git日常使用技巧 - 笔记 Git是目前世界上最先进的分布式版本控制系统 学习资料 廖雪峰 学习视频 https://www.bilibili.com/video/BV1pX4y1S7Dq/?spm_id_from333.337.search-card.all.click&vd_source2ac127043ccd79c92d5b966fd4a54cd7 Git 命令在线练习工具 https://l…

多线程 -- Thread类的基本用法

本篇重点 什么是变量捕获?? 有关线程的操作 线程创建线程中断线程等待线程休眠获取线程实例目录 1. 线程创建2. 线程中断变量捕获 线程的六种状态NEW 状态TERMNATED 状态RUNNABLE 就绪状态TIMED_WAITING 状态 1. 线程创建 关于线程的创建看上篇博客, 里面为线程的创建提供…

数据库事务到底是什么?

目录 场景(两个用户之间进行转账操作): 需要的操作步骤: 事务 事务的四大特性: 一、原子性 (1)什么是回滚操作 (2)数据库恢复操作,如何知道数据恢复如初…

C++ Stack&queue&deque

C Stack&queue&deque 📟作者主页:慢热的陕西人 🌴专栏链接:C 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 本博客主要内容主要讲解了栈和…

如何在华为OD机试中获得满分?Java实现【字符串通配符】一文详解!

✅创作者:陈书予 🎉个人主页:陈书予的个人主页 🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区 🌟专栏地址: Java华为OD机试真题(2022&2023) 文章目录 1、题目描述2、输入描述3、输出描述…

Rust 笔记:Rust 语言中应用正则表达式

Rust 笔记 Rust 语言中应用正则表达式 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263?spm1001.2101.3001.5343 邮箱 :291148484163.com 本文地址:https://blog.csdn.net/qq_28550263/article/…

【Linux】线程详解之线程互斥与同步

文章目录 Linux线程互斥一、进程线程间的互斥相关概念1.临界资源和临界区2.互斥和原子性 二、互斥量mutex1.抢票程序是否引入互斥量现象观察2.抢票程序原理分析3.互斥量的接口4. 加锁后的程序5.互斥量原理探究 可重入VS线程安全一、概念1.线程安全2.重入 二、常见的线程不安全的…

【P37】JMeter 仅一次控制器(Once Only Controller)

文章目录 一、仅一次控制器(Once Only Controller)参数说明二、测试计划设计2.1、测试计划一2.1、测试计划二 一、仅一次控制器(Once Only Controller)参数说明 可以让控制器内部的逻辑只执行一次;单次的范围是针对某…

Spring Authorization Server 系列(一)环境搭建

Spring Authorization Server 中的scope参数解析 前提依赖版本问题确定Spring Boot 版本确定 Spring Authorization Server 版本最终的依赖 第一个 Spring Authorization Server Demo 前提 由于 Spring 最新的 OAuth2 解决方案 已经由 Spring Security 下的 OAuth2 模块独立出…

从零开始学习JavaScript:轻松掌握编程语言的核心技能①

从零开始学习JavaScript:轻松掌握编程语言的核心技能 一,JavaScript 简介为什么学习 JavaScript?JavaScript 用法 二,JavaScript 输出JavaScript 显示数据JavaScript:直接写入 HTML 输出流 三,JavaScript 语法JavaScr…

VS2022发布独立部署的.net程序

.net core支持依赖框架部署和独立部署两种方式,之前学习时是在VSCode中使用dotnet命令发布的。但是在VS2022中却不知道该如何设置。以获取PDF文件使用字体的项目为例,VS2022中默认编译的是依赖框架部署方式(编译的结果如下图所示)…

Android进阶 View事件体系(三):典型的滑动冲突情况和解决策略

Android进阶 View事件体系(三):典型的滑动冲突情况和解决策略 内容概要 本篇文章为总结View事件体系的第三篇文章,前两篇文章的在这里: Android进阶 View事件体系(一):概要介绍和实…

Oracle——数据操纵DML(一)

STU1 1、不指定字段的整行插入 在STU1中新增一名同学的基本信息,SQL如下: INSERT INTO test.stu1 VALUES(0001,牛牛,男,24,to_date(1988-05-25,YYYY-MM-DD),12外语)格式如下: INSERT INTO 表名 VALUES(值1,值2,...,值n)对于CHAR或VARCHAR等…

sql-labs SQL注入平台——第二关Less-2 GET - Error based - Intiger based (基于错误的GET整型注入)

Less-2 GET - Error based - Intiger based (基于错误的GET整型注入) 一、先确认漏洞是否存在 (1)查询 id1返回查询结果正常 (2)查询 id1’返回查询结果报错,可能存在SQL注入 (3)查询 id1 …

路径规划算法:基于帝国主义竞争优化的路径规划算法- 附代码

路径规划算法:基于帝国主义竞争优化的路径规划算法- 附代码 文章目录 路径规划算法:基于帝国主义竞争优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要:本文主要介绍利用…

Dubbo环境搭建

1.搭建zookeeper注册中心环境 zookeeper下载地址 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ptMw7rb-1685261782669)(b894c0cbb6501ca97145d3b09685ae8f.png)] 在bin文件下,启动zkServer.cmd会有报错,处理需要在condi…

你所不知道的 数据在内存中储存 的来龙去脉

那么好了好了,宝子们,今天给大家介绍一下 “数据在内存中储存” 的来龙去脉,来吧,开始整活!⛳️ 一、数据类型的介绍 (1)整型和浮点型: (2)其他类型…

Linux——使用命令行参数管理环境变量

目录 使用命令行参数获取用户在DOS命令行输入的指令: 方法:代码如下: 使用命令行参数获取并打印部分或者整体环境变量的方法: 方法1: 运行结果: 方法2:使用外部链接environ: 使用命令行参数…

如何开发背包系统?

UE5 插件开发指南 前言0 背包数据结构1 背包管理组件2 背包UI显示前言 相信大家对于背包系统并不陌生,谁还没有玩过几款游戏呢?游戏中的背包都是大同小异的,朴素的功能就是存放我们获取到的物品,高级一点就是要有物品分类,便于玩家刷选背包中的物品,能够显示玩家拥有的货…

2023 牛津大学博士后申请指南

牛津大学是全球著名的高等教育机构,其博士后项目备受瞩目。为了帮助申请者更好地了解牛津大学博士后申请流程,本文将介绍该校博士后申请指南的相关内容。一、申请条件首先,申请者必须已经获得博士学位或即将完成博士学位,并具有相…