美文网首页JavaScript 从零开始
[JavaScript] (Day-15) - 面向对象编程之

[JavaScript] (Day-15) - 面向对象编程之

作者: 已重置2020 | 来源:发表于2017-07-03 20:21 被阅读13次
Life doesn't get easier, you just get stronger. 生活从未变得轻松,是你在一点一点变得坚强。

在大多数面向对象编程语言中,都有三个共同而显著的特征:封装、继承、多态!
类和实例是大多数面向对象编程语言的基本概念。

但是,在JavaScript 中,不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。

例如:

var Student = {
    name: "Robot",
    height: 1.2,
    run: function () {
        alert(this.name + ' can dance and sing');
    }
};

var mary = {
    name: "Mary"
};

mary.name; // Mary
mary.run(); // TypeError: mary.run is not a function

// 当加上这句话后
xiaoming.__proto__ = Student;

mary.run(); // Mary can dance and sing

很奇怪,最后一行代码可知,mary对象并没有定义run() 方法, 为啥会有响应呢?
倒数第二行代码把mary的原型指向了对象Student,看上去mary仿佛是从Student继承下来的

通过 __proto__ 指定对象的原型,就可以拥有原型的属性和方法


JavaScript 的原型链和JavaClass区别就在,它没有“Class”的概念,所有对象都是实例,所谓继承关系不过是把一个对象的原型指向另一个对象而已。

如果你把mary对象的原型指向其他对象:

var Bird = {
    fly: function() {
        alert(this.name + "flying...");
    }
}

mary.__proto__ = Bird;

mary.fly(); // Mary flying...

obj.__proto__去改变一个对象的原型,用于演示目的,实际开发中,用关键字new来调用这个函数,并返回一个对象

JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。


创建对象

当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined

例如,创建一个Array对象:

var arr = [1, 2, 3];

其原型链是:

arr ----> Array.prototype ----> Object.prototype ----> null

当我们创建一个函数时:

function foo() {
    return 0;
}

函数也是一个对象,它的原型链是:

foo ----> Function.prototype ----> Object.prototype ----> null


构造函数创建对象

首先用构造函数的方法来创建对象

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert(“Hello, ” + this.name + "!"");
    }
}

用关键字new来调用这个函数,并返回一个对象

var vivian = new Student('Vivian');
vivian.name; // "vivian"
vivian.hello(); // Hello, Vivian!

注意,如果不写new,这就是一个普通函数,它返回undefined。但是,如果写了new,它就变成了一个构造函数,它绑定的this指向新创建的对象,并默认返回this,也就是说,不需要在最后写return this;

新创建的vivian对象的原型链是:

vivian ----> Student.prototype ----> Object.prototype ----> null

注意:调用构造函数千万不要忘记写new

相关文章

  • [JavaScript] (Day-15) - 面向对象编程之

    在大多数面向对象编程语言中,都有三个共同而显著的特征:封装、继承、多态!类和实例是大多数面向对象编程语言的基本概念...

  • JavaScript 面向对象编程

    JavaScript 快速入门 面向对象编程创建对象构造函数忘记写new怎么办?原型继承class继承 面向对象编...

  • javascript面向对象编程之this介绍

    介绍 依旧是那个不会的带娃的测试。 简介 作为测试,了解一点js还是非常有必要的 今天介绍的是关于js(前端语言)...

  • day-15面向对象

    1.多继承多继承: 让一个类同时继承多个类 注意:实际开发的时候,一般不使用多继承 python中的函数不支持重载...

  • JavaScript学习

    javascript面向对象 初学javascript,感觉javascript的面向对象编程还是很有意思的,在此...

  • javascript的面向对象

    javascript面向对象 初学javascript,感觉javascript的面向对象编程还是很有意思的,在此...

  • ajax

    1. 面向对象 javascript 具有面向过程,面向对象,函数式编程的特点 javascript 重要 原型/...

  • 构造函数与 new 命令

    JavaScript 语言具有很强的面向对象编程能力,本章介绍 JavaScript 如何进行面向对象编程。 对象...

  • JavaScript面向对象学习笔记

    @(JS技巧)[面向对象] JavaScript面向对象学习笔记 封装 Javascript是一种基于对象(obj...

  • js高级

    学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript ...

网友评论

    本文标题:[JavaScript] (Day-15) - 面向对象编程之

    本文链接:https://www.haomeiwen.com/subject/ogpzcxtx.html