如何理解javascript中的对象

以前对javascript中的对象总有不明白的地方,在本周也遇到了疑惑,于是借着机会去深入的了解了一下javascrpit中的对象。

创建对象

在javascript中,创建对象有两种方式,一种是使用 new 操作符后跟 Object 构造函数:

let ob = new Object();

ob.name = 'object';

另一种是直接使用对象字面值:

let ob = {

      name: 'object'

    };

这两种方式是等价的,虽然 Object 构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同

一个接口创建很多对象,会产生大量的重复代码。在面向对象的设计语言中,通常通过创建类来解决这一问题。

创建类

我们可以通过自定义构造函数来实现javascript中的类:

function Student(name) {

    this.type = 'student';

    this.name = name;

    this.sayName = function() {

        console.log(this.name);

    }

}

let student1 = new Student('zhangsan');

student1.sayName(); // zhangsan

let student2 = new Student('lisi');

student2.sayName(); // lisi

要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤:

(1) 创建一个新对象;

(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);

(3) 执行构造函数中的代码(为这个新对象添加属性);

(4) 返回新对象。

这样一来,在创建相同类别的对象时,我们就不需要写大量重复的代码。但是使用构造函数创建对象并非没有缺点。使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍,并且也无法做到实例之间共享变量。

console.log(student1.sayName === student2.sayName); // false 不是同一个方法实例

为方法创建两个实例却是没有什么必要,因为在this的情况下,根本不需要在执行代码前就把函数绑定到特定对象上面。好在javascript也有解决的办法。

我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个 prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针。

修改我们的代码,将对象的方法和共享变量放置到原型对象上:

function Student(name) {

    this.name = name;

}

Student.prototype.sayName = function() {

    console.log(this.name);

}

Student.prototype.type='student';

let student1 = new Student('zhangsan');

student1.sayName();    // zhangsan

let student2 = new Student('lisi');

student2.sayName();    // lisi

console.log(student1.sayName === student2.sayName);    // true

console.log(student1.type);    // student

当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262 第 5 版中管这个指针叫[[Prototype]]。这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。这样一来,我们就可以通过原型对象来实现实例之间共享方法和变量了。

继承

继承是面向对象语言中十分重要的一个概念。javascript 实现继承主要是依靠原型链来实现的。

ECMAScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。这就是所谓原型链的基本概念。

function Student(name) {

    this.name = name;

}

Student.prototype.sayName = function() {

    console.log(this.name);

}

Student.prototype.type='student';

function CollegeStudent() {

    this.major = '计算机';

    Student.call(this,'wangwu');

}

CollegeStudent.prototype = new Student();

let collegeStudent = new CollegeStudent();

collegeStudent.sayName();

console.log(collegeStudent);

以上代码,我们用大学生继承了学生,使用Student.call(this,'wangwu')为CollegeStudent中的this作用域添加上name属性,再将CollegeStudent的原型对象设为new Student(),这样一来,就可以通过CollegeStudent的原型对象找到Student对象上的方法和属性了,这就是原型链。

虽然通过此方式可以完成继承的功能,但是无论什么情况下,都会调用两次Student构造函数。第一次是在使用Student.call()时,第二次是在使用CollegeStudent.prototype = new Student()时。我们在CollegeStudent原型中并不需要Student的属性,我们只需要Student的原型,因此可以改进为:

function Student(name) {

    this.name = name;

}

Student.prototype.sayName = function() {

    console.log(this.name);

}

Student.prototype.type='student';

function CollegeStudent() {

    this.major = '计算机';

    Student.call(this,'wangwu');

}

CollegeStudent.prototype = create(Student);

let collegeStudent = new CollegeStudent();

collegeStudent.sayName();

function create(father) {

    function f() {

    }

    f.prototype = father.prototype;

    return new f();

}

唯一的不同点就在于CollegeStudent.prototype = create(Student),此时CollegeStudent的原型对象指向的是仅仅包含Student的原型对象而不包含Student的实例属性(在f函数中并没有定义任何的属性,仅仅将f的原型对象指向Student的原型对象,此时new f()得到的实例对象仅仅包含对Student原型对象的引用)。

此时的CollegeStudent原型链:

最后:

上面都是自己整理好的!我就把资料贡献出来给有需要的人!顺便求一波关注。

学习我们是认真的,拿大厂offer是势在必得的。java(想了解更多点一下哦)

原文链接:https://segmentfault.com/a/1190000021872192?utm_source=tuicool&utm_medium=referral

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容