一:写在前面的问题和话

一个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的继承

JavaScript进阶之路(一)初学者的开始的更多相关文章

  1. JavaScript进阶之路 初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  2. JavaScript进阶之路——认识和使用Promise,重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

  3. Javascript进阶之路-论对象的重要性

    要了解JavaScript对象,我们可以从对象创建.属性操作.对象方法这几个方面入手.概括起来,包括以下几模块: 1.创建对象        1.1 对象直接量        1.2 通过new创建对 ...

  4. GO语言的进阶之路-协程和Channel

    GO语言的进阶之路-协程和Channel 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 看过我之前几篇博客小伙伴可能对Golang语言的语法上了解的差不多了,但是,如果想要你的代码 ...

  5. OpenCV进阶之路:神经网络识别车牌字符

    1. 关于OpenCV进阶之路 前段时间写过一些关于OpenCV基础知识方面的系列文章,主要内容是面向OpenCV初学者,介绍OpenCV中一些常用的函数的接口和调用方法,相关的内容在OpenCV的手 ...

  6. 2017PHP程序员的进阶之路

    2017PHP程序员的进阶之路 又是一年毕业季,可能会有好多毕业生即将进入开发这个圈子,踏上码农这个不归路.根据这些年在开发圈子总结的LNMP程序猿发展轨迹,结合个人经验体会,总结出很多程序员对未来的 ...

  7. GO语言的进阶之路-初探GO语言

    GO语言的进阶之路-初探GO语言 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.为什么我们需要一门新语言 Go语言官方自称,之所以开发Go 语言,是因为“近10年来开发程序之难 ...

  8. Scala进阶之路-Scala中的Ordered--Ordering

    Scala进阶之路-Scala中的Ordered--Ordering 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   说道对象的比较,在Java中大家最熟悉不过的就是实现类本身实 ...

  9. Scala进阶之路-高级数据类型之集合的使用

    Scala进阶之路-高级数据类型之集合的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Scala 的集合有三大类:序列 Seq.集 Set.映射 Map,所有的集合都扩展自 ...

随机推荐

  1. CodeForces 710CMagic Odd Square(经典-奇数个奇数&偶数个偶数)

    题目链接:http://codeforces.com/problemset/problem/710/C 题目大意:输入一个奇数n,则生成n*n矩阵,要求矩阵的行.列还有斜着,所有元素之和为奇数. 解题 ...

  2. Spring学习(三)——Spring中的依赖注入的方式

    [前面的话] Spring对我太重要了,做个关于web相关的项目都要使用Spring,每次去看Spring相关的知识,总是感觉一知半解,没有很好的系统去学习一下,现在抽点时间学习一下Spring.不知 ...

  3. winform之自定义控件

    这样的一个控件 肯定得通过自定义控件来实现了 public class ProcessLabel : Control { public ProcessLabel() { //InitializeCom ...

  4. Python标准库06 子进程 (subprocess包)

    这里的内容以Linux进程基础和Linux文本流为基础.subprocess包主要功能是执行外部的命令和程序.比如说,我需要使用wget下载文件.我在Python中调用wget程序.从这个意义上来说, ...

  5. Android 手动显示和隐藏软键盘

    1.方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) InputMethodManager imm = (InputMethodManager) getSystemService(Contex ...

  6. 前后端分离(手)-- 使用mock.js(好样的)

    ## 前言: 本篇博文昨天七夕写的,一天下来被虐得体无完肤,苦逼的单身狗只能学习,对!我爱学习,关掉朋友圈,并写了一篇博文发泄发泄.这次写mock.js的使用,能使前后端分离,分离,分离,重要的是说三 ...

  7. Mat, IplImage, CvMat, Cvarr关系及元素获取

    自己目前正打算整理opencv数据结构之间关系,寻寻觅觅之间,发现这篇博文很全面,总结得很好,故转之.红色部分不对,自己已修改! 原文地址:http://blog.csdn.net/abcjennif ...

  8. (一)linux定时任务的设置 crontab 基础实践

    为当前用户创建cron服务 1.  键入 crontab  -e 编辑crontab服务文件 例如 文件内容如下: */2 * * * * /bin/sh /home/admin/jiaoben/bu ...

  9. 什么是ZooKeeper?

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 上次写了一篇 什么是消息队列?以后,本来想入门一下K ...

  10. jquery fileupload

    jquery file upload示例  https://blog.csdn.net/qq_37936542/article/details/79258158