23-面向对象之封装、继承、多态

混合的构造函数/原型模式
我们再来看一下另一个例子：
function Circle(r) { this.r = r; } Circle.prototype.c = function(){ var result=2*Math.PI*this.r; alert("周长是:"+result); } Circle.prototype.s = function(){ var result=Math.PI*this.r*this.r; alert("面积是："+result); } var circle1 = new Circle(6); circle1.c();
No.2
封装
ቤተ መጻሕፍቲ ባይዱ
封装性
封装就是把抽象出来的数据和对数据的操作封装在一起，数据被保护在内部，程序的其它部分 只有通过被授权的操作(成员方法)，才能对数据进行操作。 JS封装就是尽量把使用的方式简单化。通俗的说就是使用的时候只需要知道参数和返回值，其 他条件尽量不要使用人为进行设置。 语言中有一个很重要的组成，叫做“函数”，一般都会把函数封闭起来，对外预留几个数据接 口，隐藏函数内部的情况。这就叫封装。这种封装是底层封装，对用户来说是没什么影响的，
alert("面积是："+result);
} return {
zc:c,
mj:s
//json结构
}
})(); circle.zc(); //2
circle.mj(); //3
三、对象方式
对象，是javascript中非常重要的一个梗，是否能透彻的理解它直接关系到你对整个 javascript体系的基础理解，说白了，javascript就是一群对象在搅。。（和！）。 – 1. new Object 模式 – 2. JSON对象模式 – 3. 构造函数模式 – 4. 原型对象模式 – 5. 构造函数 + 原型对象模式
– alert(cat1.type); // 猫科动物
– cat1.eat(); // 吃老鼠
表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容 ，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既浪费资源，也降低了效率。
alert("面积是："+result);
} } var circle1 = new Circle(6); circle1.c();
构造函数模式
构造函数方法很好用，但是存在一个浪费内存的问题。
我们现在为Cat对象添加一个不变的属性"type"（种类），再添加一个方法eat（吃老鼠）。构造函数就变成了下面这样： – function Cat(name,color){
原型（对象）模式
1、当我们创建一个函数时，该函数就会具备一个prototype属性，这个属性指向通过构造函数创 建的那个函数的原型对象。通俗点讲原型对象就是内存中为其他对象提供共享属性和方法的对象 。 2、在原型模式中，不必在构造函数中定义实例属性，可以将属性信息直接赋予原型对象： 3、和构造函数不同的是这里新对象的属性和方法是所有实例都可以共享的，换句话说gf1和gf2访 问的是同一份属性和方法。
}
var cat1 = new Cat(); var cat2 = new Cat();
这种写法解决了构造函数模式中不变属性和不变方法多占用内存的问题，但是又带来了新的问题，可变属性和可变方法也受到了影响
="二毛"; alert();//二毛 alert();//二毛
二、闭包形式
实现步骤： 1、把一个个功能封装在不同的函数中 2、把所有功能函数封装在一个自运行函数中，同时自运行函数要赋给一个变量，方便外部通过该 变量名访问内部的功能。 3、自运行函数末尾一定有 return语句，把各个功能函数以返回值的形式返回给json格式的数据。 注意： 这样内部的函数就可在外部以对象方法的形式调用。 案例：千图网的tab切换----闭包封装
通过对原型对象模式的初步了解，我们发现所有的实例对象都共享相 同的属性，这是原型模式的基本特点，但往往对于开发者来说这是把“双 刃剑”，在实际开发中，我们希望的实例应该是具备自己的属性，这也是 在实际开发中很少有人单独使用原型模式的主要原因。
混合的构造函数/原型模式
什么是混合的构造函数/原型模式？ 构造函数模式定义可变的属性和方法 原型模式定义不变的属性和方法
先写构造函数部分 function Cat(name,color){ = name; this.color = color; } 再写原型部分 Cat.prototype.type = "猫科动物"; Cat.prototype.eat = function(){ alert("吃老鼠"); } 生成实例 var cat1 = new Cat("大毛","黄色"); var cat2 = new Cat ("二毛","黑色"); = "三毛"; alert(); //三毛 alert(); //二毛
但是对于编程人员来说，用封装好的函数会极大的提高程序编写效率。
JS封装的方法
1、函数方式 2、闭包的方式 3、对象的方式
一、函数方式
1、把可能会重复使用的各部分功能的代码，封装在不同的函数中 2、函数在应用于不同对象时，需要动态改变的量，可以以参数的形式传入。 demo1：千图网的tab切换----函数封装 demo2：千图网的tab切换----函数封装-用json传递参数
alert(); // 大毛
alert(cat1.color); // 黄色 这时cat1和cat2会自动含有一个constructor属性，指向它们的构造函数。 alert(cat1.constructor == Cat); //true alert(cat2.constructor == Cat); //true Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系。 alert(cat1 instanceof Cat); //true alert(cat2 instanceof Cat); //true
面向对象之封装、继承、多态
HTML5课程 版本V2.0
No.1
基于对象三大特征
JavaScript基于对象的三大特征
Javascript基于对象的三大特征和C++，Java面向对象的三大特征一样，都是封 装(encapsulation)、继承(inheritance )和多态(polymorphism )。只不过实现 的方式不同，其基本概念是差不多的。
二、闭包形式
var circle = (function(){
var r = 3; //私有成员，不能被外部访问，但可以被内部子函数调用
function c(){
var result=2*Math.PI*r;
alert("周长是:"+result);
} function s(){ var result=Math.PI*r*r;
原型（对象）模式
function Circle() {} Circle.prototype.r = 6; Circle.prototype.c = function(){ var result=2*Math.PI*this.r; alert("周长是:"+result); } Circle.prototype.s = function(){ var result=Math.PI*this.r*this.r; alert("面积是："+result); } var circle1 = new Circle(6); circle1.c();
构造函数模式
function Circle(r) { this.r = r; this.c = function(){
var result=2*Math.PI*this.r;
alert("周长是:"+result);
} this.s = function(){
var result=Math.PI*this.r*this.r;
color:color
} } var cat1 = Cat("大毛","黄色"); var cat2 = Cat("二毛","黑色");
代码重复的问题解决了，但这种方法的依然有缺点 cat1和cat2之间没有内在的联系，不能反映出它们是同一个原型对象的实例
构造函数模式
为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。 所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算 符，就能生成实例，并且this变量会绑定在实例对象上。
– = name;
– this.color = color; – this.type = "猫科动物"; – this.eat = function(){alert("吃老鼠");}; –} 还是采用同样的方法，生成实例： – var cat1 = new Cat("大毛","黄色"); – var cat2 = new Cat ("二毛","黑色");
var cat2 = {};
= "二毛";
cat2.color = "黑色";