一:写在前面的问题和话

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

随机推荐

  1. 用java下载hdfs文件报NullPointerException

    用fs.copyToLocalFile( hdfsPath,localPath);下载hdfs的文件会报NullPointerException,具体报错为: java.lang.NullPointe ...

  2. 五、Hadoop学习笔记————调优之硬件选择

    ResourceManageer服务器需要选择性能较好的 若有1TB数据,每天增量为10GB,则需要预留17.8TB,*3是因为有三分备份,*1.3是因为还需要预留出空间给操作系统等等 若集群在三十台 ...

  3. 一个未排序整数数组,有正负数,重新排列使负数排在正数前面,并且要求不改变原来的正负数之间相对顺序,比如: input: 1,7,-5,9,-12,15 ans: -5,-12,1,7,9,15 要求时

    #include <iostream> using namespace std; void txsort(int* arr, int len) { if (!arr || len == 1 ...

  4. (二分查找 拓展) leetcode 162. Find Peak Element &amp;&amp; lintcode 75. Find Peak Element

    A peak element is an element that is greater than its neighbors. Given an input array nums, where nu ...

  5. sass补充(2019-3-9)

    @each 输出 格式: @each $var in value,value1,value2{ } eg: @each $var1 in 100px,200px,300px{ .box{ width: ...

  6. js 改变只读属性的值

    console.log(navigator.platform); // Win32 Object.defineProperty(navigator, 'platform', { value: 'cc' ...

  7. android手机测试中如何查看内存泄露

    (一) 生成.hprof文件生成.hprof 文件的方法有很多,而且Android 的不同版本中生成.hprof 的方式也稍有差别,我使用的版本的是2.1,各个版本中生成.prof 文件的方法请参考: ...

  8. Windows系统FTP Shell

    ftp open 10.0.0.0.2 21101 user passwd ls cd pwd delete get /home/err.log Error.log put err.log /home ...

  9. Legendre多项式

    Legendre多项式 时间限制: 1 Sec  内存限制: 128 MB 题目描述 Legendre多项式的递归公式

  10. 使用CSS3 Flexbox布局

    Flexbox(中文版本可以点击这里)的布局是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布局可以通过 ...