JavaScript的面向对象

Charlie_Jade 发布于2019-08-22 15:44 / 589人阅读

摘要：这个通过构造函数生成的对象，有一个属性，它指向构造函数的原型对象，既访问时，在它自身寻找该属性，找到了，于是就返回该值。

JavaScript的面向对象与其他语言的面向对象，其实有很大的区别。

JavaScript是基于原型的面向对象系统，而传统语言(比如java)的面向对象都是基于类的。

构造函数

function Person(name, age, job) {
    this.age = age;
    this.name = name;
    this.job = job;
}

Person.prototype.sayName = function() {
    console.log(this.name);
}

var cody = new Person("cody", "24", "frontend");
cody.name;
cody.sayName();

在这个常见的构造函数写法中，我们需要知道以下几点：

1.Person这个函数被定义后，会自带一个prototype属性，这个属性指向一个对象，既原型对象，这个对象同时有一个constructor属性，指向Person

Person.prototype = {
    constructor: Person
}

注意的是，所有函数都有prototype属性，并不是只有构造函数才有。

2.cody这个通过构造函数生成的对象，有一个__proto__属性，它指向构造函数Person的原型对象，既Person.prototype
访问cody.name时，在它自身寻找该属性，找到了，于是就返回该值。
访问cody.sayName时，也是先在它自身寻找该属性，但是无法找到，于是开始通过原型链向上寻找: 寻找cody.__proto__，也就是Person.prototype原型对象，发现了该属性，于是返回这个方法。
访问cody.toString时，在Person.prototype原型对象上也找不到，这时，继续向上寻找，既寻找Person.prototype.__proto__也就是Object.prototype，在它上面，可以找到toString

继承

function Animal(name) {
    this.name = name;
}
Animal.prototype.sayName = function() {
    console.log(this.name);
}

function Duck(name, color) {
    Animal.call(this, name);
    this.color = color;
}

Duck.prototype = new Animal();
// 也可以优化成这样，减少一次父级构造函数调用
// Duck.prototype = Object.create(Animal.prototype);
Duck.prototype.constructor = Duck;
Duck.prototype.sayColor = function() {
    console.log(this.color);
}

var duck = new Duck("duck", "yellow");
duck.sayColor();
duck.sayName();

前面我们说过，JS是基于原型的面向对象。所以，继承并不一定需要使用构造函数，我们可以基于一个已经存在的对象，对这个对象进行继承。

var obj = {
    name: "cody",
    say: function() {
        console.log(this.name)
    }
};

var sub = Object.create(obj);
sub.name = "deepred";
sub.say(); // deepred

Object.create的原理是：

Object.create = Object.create || function(obj) {
    var F = function() {};
    F.prototype = obj;

    return new F();
}

ES6的class语法

ES6引入了class语法，让JS看起来更像是面向对象的语言，但这仅仅是语法糖而已，背后仍然是基于原型的继承方式。

class Animal {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name)
    }
}

class Duck extends Animal {
    constructor(name, color) {
        super(name);
        this.color = color;
    }

    sayColor() {
        console.log(this.color);
    }

    sayName() {
        // 调用父级同名方法
        super.sayName();
        console.log("duck sayname")
    }
}

var duck = new Duck("duck", "red");
duck.sayColor();
duck.sayName();

GPU云服务器云服务器 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93713.html

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
javascript 面向对象版块之理解对象

摘要：用代码可以这样描述安全到达国外面向过程既然说了面向对象，那么与之对应的就是面向过程。小结在这篇文章中，介绍了什么是面向对象和面向过程，以及中对象的含义。这是 javascript 面向对象版块的第一篇文章，主要讲解对面向对象思想的一个理解。先说说什么是对象，其实这个还真的不好说。我们可以把自己当成一个对象，或者过年的时候相亲，找对象，那么你未来的老婆也是一个对象。我们就要一些属性，比...

lovXin 2019-08-22 15:04 评论0 收藏0
javascript面向对象之“多态”

摘要：之前，本质上不能算是一门面向对象的编程语言，因为它对于封装继承多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。所以在中出现了等关键字，解决了面向对象中出现了问题。 ES6之前，javascript本质上不能算是一门面向对象的编程语言，因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以让我们以...

JerryWangSAP 2019-08-23 14:11 评论0 收藏0