一:写在前面的问题和话

一个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进阶之路——认识和使用Promise,重构你的Js代码

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

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

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

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

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

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

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

  5. #笔记#JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  6. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  7. MVC进阶之路:依赖注入(Di)和Ninject

    MVC进阶之路:依赖注入(Di)和Ninject 0X1 什么是依赖注入 依赖注入(Dependency Injection),是这样一个过程:某客户类只依赖于服务类的一个接口,而不依赖于具体服务类, ...

  8. JavaScript 进阶(一)JS的"多线程"

    这个系列的文章名为“JavaScript 进阶”,内容涉及JS中容易忽略但是很有用的,偏JS底层的,以及复杂项目中的JS的实践.主要来源于我几年的开发过程中遇到的问题.小弟第一次写博客,写的不好的地方 ...

  9. 【SSH进阶之路】Hibernate映射——多对一单向关联映射(四)

    [SSH进阶之路]Hibernate基本原理(一) ,小编介绍了Hibernate的基本原理以及它的核心,採用对象化的思维操作关系型数据库. [SSH进阶之路]Hibernate搭建开发环境+简单实例 ...

随机推荐

  1. Quartz.Net简单使用

    Quartz.Net为开源的作业调度框架,使用方便,实现IJob接口,及相关配置,即可实现调度. 项目包安装: install-package Quartz install-package log4n ...

  2. 关于跨域名的信息共享P3P实例

    首先我这里用到了redis 和 p3p技术.当然任意的nosql都可以满足 模拟的一个登陆访问的客户端. <?php session_start(); $get = $_GET; ') { $t ...

  3. PHP 检查并创建多级目录

    <?php //检查并创建多级目录    function checkDir($path){        $pathArray = explode('/',$path);        $no ...

  4. VS安装及单元测试

    VS安装过程: 最大子数组算法已提交至coding.net: https://git.coding.net/CoCoBeer/Maxsubaray.git 用例编号 用例描述 输入数据 预期输出数据 ...

  5. (转)B-树、B+树、B*树

    B-树 是一种多路搜索树(并不是二叉的): 1.定义任意非叶子结点最多只有M个儿子:且M>2: 2.根结点的儿子数为[2, M]: 3.除根结点以外的非叶子结点的儿子数为[M/2, M]: 4. ...

  6. FTP定时批量下载文件(SHELL脚本及使用方法&#160;)

    1. 脚本实例 将以下脚本保存为 getftp.sh #!/bin/bash  datesign=`date -d -95day +%Y%m%d` ftp -nv 12.2.2.28 << ...

  7. Gruntjs: grunt-contrib-jst

    预编译Underscore模板到JST文件(Underscore:JS工具库) generate JavaScript template functions Gruntfile的配置实例: modul ...

  8. Hadoop 面试题redis

    Hadoop 面试题之十 548.redis有什么特别之处,为什么用redis,用hbase 不行么? 答:redis 是基于内存的数据库,速度快 551.redis用什么版本? 3.0以上才支持集群 ...

  9. uC/OS II原理分析及源码阅读(一)

    uC/OS II(Micro Control Operation System Two)是一个可以基于ROM运行的.可裁减的.抢占式.实时多任务内核,具有高度可移植性,特别适合于微处理器和控制器,是和 ...

  10. Linux系统中“动态库”和“静态库”那点事儿 /etc/ld.so.conf 动态库的后缀为*.so 静态库的后缀为 libxxx.a ldconfig 目录名

    Linux系统中“动态库”和“静态库”那点事儿 /etc/ld.so.conf  动态库的后缀为*.so  静态库的后缀为 libxxx.a   ldconfig   目录名 转载自:http://b ...