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

news/2024/10/31 5:33:18/

一:写在前面的问题和话

一个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.ppmy.cn/news/98682.html

相关文章

USB Type-C接口会成为显示器行业的下个风口吗?

最近市场上开始陆续涌现配有USB-C接口的显示器,很多小伙伴并不知道这接口是什么用途。除一些老旧设备使用VGA外,目前显示器常用接口不外乎HDMI、DP、DVI这几种,但很多人并不知道,USB-C也是显示器接口之一。 为什么选择 USB-C&…

输出格式说明符%u

c语言中的%u是输入输出格式说明符,表示按unsigned int格式输入或输出数据。 %d 有符号10进制整数 %i 有符号10进制整数 %o 无符号8进制整数 %u 无符号10进制整数 %x 无符号的16进制数字,并以小写abcdef表示 %X 无符号的16进制数字,并以大…

node.js与内置模块

一、目标 能够知道什么是Node.js能够知道Node.js可以做什么能够说出Node.js中的JavaScript的组成部分能够使用fs模块读写操作文件能够使用path模块处理路径能够使用http模块写一个基本的web服务器 二、目录 初始Node.jsfs文件系统模块path路径模块http模块 1.初始Node.js …

python基础知识(二):变量和常用数据类型

目录 1. 变量1.1 变量的定义1.2 变量的命名规则 2. 常用数据类型2.1 字符串2.1.1 字符串的常用方法2.1.1.1 title()方法:将字符串中的单词首字母大写2.1.1.2 upper()方法:将字符串中的单词字母全大写2.1.1.3 lower()方法:将字符串中的单词字母…

[Nacos] Nacos Server处理订阅请求 (九)

文章目录 1.InstanceController#list()2.InstanceController#doSrvIpxt()3.总结 1.InstanceController#list() Nacos Server处理订阅请求 主要还是从请求中获取参数, 比如namespceId、serviceName、agent(指定提交请求的客户端是哪种类型)、clusters、clusterIP、udpPort(后续…

数据结构基础内容-----第五章 串

文章目录 串串的比较串的抽象数据类型串的顺序存储结构朴素的额模式匹配算法kmp模式匹配算法 串 在计算机编程中,串(String)是指由零个或多个字符组成的有限序列。它是一种基本的数据类型,在许多编程语言中都得到了支持和广泛应用…

数据库基础——5.运算符

这篇文章我们来讲一下SQL语句中的运算符操作。 说点题外话:SQL本质上也是一种计算机语言,和C,java一样的,只不过SQL是用来操作数据库的。在C,java中也有运算符,这两种语言中的运算符和数学中的运算符差距不…

《数据库应用系统实践》------ 包裹信息管理系统

系列文章 《数据库应用系统实践》------ 包裹信息管理系统 文章目录 系列文章一、需求分析1、系统背景2、 系统功能结构(需包含功能结构框图和模块说明)3.系统功能简介 二、概念模型设计1.基本要素(符号介绍说明&…