阮一峰的网络日志

1.生成实例对象的原始模式

 var People = {
name : '',
age : ''
}

根据这个原型对象生成两个实例对象

 var people1 = {};
people1.name = 'jack';
people1.age = 18;
var people2 = {};
people2.name = 'lucy';
people2.age = 17;

这即为简单的封装,把两个属性封装在一个对象里面

缺点:
1.如生成多个实例,写起来麻烦。
2.实例与原型之间看不出联系

2.原始模式改进

function People(name,age) {
return {
name:name,
age:age
}
}

然后生成实例,等于调用函数

 var people1 = People('jack',18);
var people2 = People('lucy',17)

缺点:people1与people2之间没有内在联系,不能反映出它们是一个原型对象的实例

3.构造函数模式

所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

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

生成实例对象

var people1 = new People('jack',18);
var people2 = new People('lucy',17);
alert(people1.name); //jack
alert(people1.age); //18

people1和people2会自动含有一个constructor属性,指向它们的构造函数

alert(people1.constructor == People); //true
alert(people2.constructor == People); //true

4.构造函数模式的问题

构造函数存在一个浪费内存的问题

function People(name,age) {
this.name = name;
this.age = age;
this.job = 'web';
this.say = function(){
alert('你好')
}
}

生成实例

var people1 = new People('jack',18);
var people2 = new People('lucy',17);
alert(people1.job); //web
people1.say(); //你好

这样有一个弊端,对于每一个实例对象,job属性和say()方法都是一样的内容,每一次生成一个实例,都是重复的内容,多占内存。

alert(people1.say == people2.say); //false

5.Prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

function People(name,age) {
this.name = name;
this.age = age
}
People.prototype.job = 'web';
People.prototype.say = function(){
alert('你好')
}

生成实例

var people1 = new People('jack',18);
var people2 = new People('lucy',17);
alert(people1.job); //web
people1.say(); //你好

这时所有的job属性和say()方法都是同一个内存地址

JavaScript面向对象(封装)的更多相关文章

  1. Javascript面向对象(封装、继承)

    Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...

  2. JavaScript面向对象--封装

    一.封装的概念 面向对象的类包括两大成员,一种是暴露给外部的接口,另一种是只在类内部才能访问的私有属性.在这个类被实例化成对象后,用户只能通过操作给定的接口来访问该类内部的私有属性,这就被称为面向对象 ...

  3. javascript --- 面向对象 --- 封装

    javascript中有原型对象和实例对象 如有疑问请参考:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_enca ...

  4. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  5. javascript面向对象(一):封装

    本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...

  6. 【转】Javascript 面向对象编程(一):封装

    原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript ...

  7. Javascript 面向对象编程(一):封装 by 阮一峰

    <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Java ...

  8. JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)

    本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...

  9. Javascript 面向对象编程—封装

      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

  10. Javascript 面向对象编程—继承和封装

      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

随机推荐

  1. 警告: The web application [ROOT] appears to have started a thread named [Thread-48] but has failed to stop it. This is very likely to create a memory leak. Stack trace of thread:

    1. 问题描述 tomcat跑web项目(其中依赖java项目) 出现大量上述警告 项目起不来 关键字 memory leak 内存泄漏 2. 解决方案 难道是程序写的有问题? 最终 将tomcat ...

  2. CSS总结摘要

    一 概述 1.什么是CSS? Cascading Style Sheet,层叠样式表,用于设定页面内容的显示样式. 2.为一个元素添加多个样式 一个元素可以同时定义多个类,不同类之间用空格隔开,如cl ...

  3. Git 学习记录

    安装 1.  https://git-for-windows.github.io下载(网速慢的同学请移步国内镜像),然后按默认选项安装即可.安装完成后,在开始菜单里找到“Git”->“Git B ...

  4. VS code 自定义快捷输入

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 位置 ctrl+shift+p 搜索: snippets 输入类型: 比如 ...

  5. Python基础-接口与归一化设计、抽象类、继承顺序、子类调用父类,多态与多态性

    一.接口与归一化设计 Java接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能). 由 ...

  6. HBuilder自定义格式化代码

    对于代码格式到底为两个空格还是四个空格,可能大家喜欢的都不同,如果你是在使用HBuilder编辑器,那么恭喜你,这两种代码格式你可以轻易的更换.下面贴步骤 1.打开工具—>选项 2.选择HBui ...

  7. ES6入门——函数的扩展

    1.函数参数的默认值 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法.现在ES6可以为函数的参数添加默认值,简洁了许多. ES5 function show(a,b){ b = b ...

  8. Java基础之多线程详细分析

    在了解多线程之前,先来了解一下进程与线程之间的关系. 进程和线程: 进程是指在系统中正在执行的一个程序,每个进程之间是独立的. 线程是进程的一个基本执行单元.一个进程要想执行任务,必须得有线程(每1个 ...

  9. 使用原生的javascript来实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 64位Navicat Premium-11.2.7(64bit)访问64位Oracle服务器

    1 在windows 10 64位操作系统安装Navicat Premium-11.2.7(64bit). 2 在服务器安装64位的Oracle(win64_11gR2_database). 3 在h ...