前端技巧|JavaScript面向对象编程理解

对编程有了解的同学都知道，面向对象是一个非常难以理解的概念，下面给大家分享一下对象object的理解，本篇文章主要分享面对对象的封装。当然现实生活中面向对象也挺难的，哈哈哈~

一，关于实例对象的原始模式

首先我们知道每个物体都是一个对象，举例来说，“狗”作为一个对象，他有“种类”和“颜色”两个属性。

然后，我们需要创建两个实例化对象

这也是最基础的对象封装，也就是把“种类”和“颜色”两个属性放在一个对象里面。但是问题来了，这种写法有两个问题：一是如果要生成很多个实例化对象，就需要重复很多遍，很麻烦；二是他们与原型Dog结构很相似，但是实际上没有建立直接的联系。

二，原始模式升级

重复的代码，我们可以写一个函数来解决

接着再调用函数，生成实例化对象

这种方法可以解决生成多个实例化对象代码复杂的问题，但是dog1和dog2之间没有产生关联，也就是依然没有体现出他们其实是原型对象Dog的实例。

三，构造函数

为了解决让实例化对象需要从原型对象生成的问题，js提供了构造函数这样一个概念。当然其实构造函数本质上也就是一个普通函数，只不过函数内部使用了this，为了区分于普通函数，我们一般对构造函数首字母大写，具体代码如下：

有了这个构造函数，我们就可以生成实例化对象了，具体代码如下：

这里我们可以看到关键字new , 也就是实际上Dog是一个对象，dog1和dog2是Dog这个对象的实例化对象；为了验证这一点，js提供了一个属性constructor，此属性用于指向他们的构造函数

当然，js还有另一个运算符 instanceof，可以验证原型对象与实例化对象之间的关系。

到构造函数这里看似已经很完美了，但是，这里存在一个很大的弊端，也就是内存浪费。举例来说，我们现在给Dog对象添加一个不变的属性和方法如下：

当然这里生成实例化方法也还是一样的，但是这里会有一个很大的问题：也就是我们会发现age属性和eat()方法明明是一模一样的内容，但是由于每次生成实例化对象时，都会生成同样的内容，多造成内存浪费。

console.log(dog1.eat == dog2.eat); // false

如果能让age和eat()在内存中只生成一次，让实例化对象指向同一个内存地址就更完美了。

四，prototype模式

js为每一个构造函数都提供了一个prototype属性，让他指向另一个对象，而这个对象的所有属性和方法都会被构造函数的实例对象继承。这也就意味着，只要我们把那些不变的属性和方法定义在prototype对象上即可。

接着再生成实例，此时，所有实例的age个eat()方法都会指向同一个内存地址，也就是prototype对象，这样也就避免了内存浪费问题，从而提供运行效率。

console.log(dog1.eat == dog2.eat); // true

当然为了验证这一问题，js定义了一些辅助属性。

1. isPrototypeOf() , 此方法用于验证prototype对象和实例化对象之间的关联

console.log(Dog.prototype.isPrototypeOf(dog1)); // true

console.log(Dog.prototype.isPrototypeOf(dog2)); // true

2. HasOwnProperty() , 每个实例化对象都有此方法，顾名思义，这个方法是用于验证属性是自有的还是继承自prototype对象的；这里很显然type是自有属性，而age是继承自prototype对象。

console.log(dog1.hasOwnProperty('type')) // true

console.log(dog1.hasOwnProperty('age')) // false

想要学习web前端的同学，可以参考千锋成都web前端培训班提供的学习大纲；

前端技巧|JavaScript面向对象编程理解相关推荐

JavaScript面向对象编程理解
对编程有了解的同学都知道,面向对象是一个非常难以理解的概念,下面给大家分享一下对象object的理解,本篇文章主要分享面对对象的封装.当然现实生活中面向对象也挺难的,哈哈哈~ 一,关于实例对象的原始模 ...
如何通俗的理解javascript面向对象编程？
如何通俗的理解javascript面向对象编程? 1.面向对象的简单认识 2.理解类的概念创建类的二种常见的方式 3.判断类的区别 4.三种创建实例的方法
《JavaScript面向对象编程指南》——第1章引言1.1 回顾历史
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.1节,作者: [加]Stoyan Stefanov 译者: 凌杰更多章节内容可以访问云栖社区" ...
《javascript面向对象编程指南》读书笔记
<javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记第一章面向对象的JavaScript 第二章基本数据类型与流程控制变量 ...
JavaScript面向对象——深入理解寄生组合继承
JavaScript面向对象--深入理解寄生组合继承之前谈到过组合继承,会有初始化两次实例方法/属性的缺点,接下来我们谈谈为了避免这种缺点的寄生组合继承寄生组合继承: 思路:组合继承中,构造函数继 ...
浅谈JavaScript 面向对象编程[转]
这周心血来潮,翻看了现在比较流行的几个 JS 脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大-- 感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript 面 ...
JavaScript 面向对象编程（三） —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝
本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门系列笔记: JavaScript 面 ...
JavaScript 面向对象编程（二） —— 构造函数 / 原型 / 继承 / ES5 新增方法
本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...
在JavaScript面向对象编程中使用继承(5)
明天就要回老家去过年了,关于这个"在JavaScript面向对象编程中使用继承"的话题居然还没有说完.如果不完成,留下来一拖就拖到明年去了.所以还是抽空把它写完,今年的事情今年做, ...

前端技巧|JavaScript面向对象编程理解

前端技巧|JavaScript面向对象编程理解相关推荐

最新文章

热门文章