总结JS面向对象

最新推荐文章于 2024-11-08 23:08:46 发布

dhfjx06824

最新推荐文章于 2024-11-08 23:08:46 发布

阅读量112

点赞数

文章标签：数据结构与算法 javascript ViewUI

原文链接：http://www.cnblogs.com/luyanting/p/4112785.html

版权

javascript面向对象

(一)

对象其实就是一种引用类型。

而对象的值就是引用类型的实例。

在 JavaScript 中引用类型是一种数据结构，
将数据和功能组织在一起。

它也常被称做为类，但 JavaScript 中却没有类的概念。

虽然 JavaScript 是一门面向对象的语言，
却不具备传统面向对象语言所支持的类和接口等基本结构。

对象的创建以及常用操作
使用 new 运算符

var user = new Object(); //使用 new 运算符创建一个对象
user.name = '美女'; //给对象添加属性
user.age = 18;
user.address = '成都';
对象字面量

var user = {
name:'美女',
age:18,
address:'成都'
};
简单方式(传统赋值方式)

var user = {};
user.name = '美女'; //给对象添加属性
user.age = 18;
user.address = '成都';

属性的调用

对于对象属性的调用有两种方式：

调用方法如下：

alert(user.name + " " +user.age); //返回 '美女成都'

另一种方法：

alert(user['name'] + " " +user['age']); //返回 '美女成都'

添加方法

alert("Hello!");
}
} user.showInfo(); //调用方法 user.showHello();

(二)

创建对象

我们知道，要创建一个对象我们可以用如下代码：

var user = new Object();
user.name = 'mm';
user.age = 20;
user.address = '乐山';

用这样的方法创建对象比较简单直观，也是 JavaScript 种创建对象最基本的方法。
但是这样就有一个问题，如果我们需要创建多个对象，那么我就得写很多重复的代码。
比如我们想创建另一个对象 user1 ，我们就得重新将上面的代码重新写一遍，
这在实际开发过程中是不合适的，这样如果对象过多，代码量将大大增加。

为了解决这样的问题，我们可以使用一种叫做工厂模式的方法，这种方法
就是为了解决实例化对象产生大量重复代码的问题。

工厂模式

function create(name, age) {
　　var obj = new Object();
　　obj.name = name;
　　obj.age = age;
　　obj.show = function () {
　　　　return this.name +' '+ this.age;
　　};
　　return obj;
}

var obj1= create('bclz', 30); //第一个实例
var obj2= create('bcxb', 20); //第二个实例
alert(obj1.show());
alert(obj2.show());

从上面的代码我们可以看出，工厂模式解决了实例化时代码大量重复的问题，
但又出现了一个问题，那就是识别问题，我们根本无法弄清楚他们到底是哪个对象的实例。比如

alert(typeof obj1); //Object

alert(obj1 instanceof Object); //true

以上代码标明 obj1 是 Object 对象，但是我们无法知道具体是哪一个对象创建的。

构造函数(构造方法)

function User(name, age) { //构造函数模式
　　this.name = name;
　　this.age = age;
　　this.show = function () {
　　　　return this.name + ' '+this.age;
　　};
}

创建对象的时候用 new 运算符就可以了：

var user1 = new User('mm', 20); //第一个实例
var user2 = new User('ss', 10); //第二个实例

现在我们就可以检测 user1 或者 user2 是不是属于 User。

alert(user1 instanceof User); //true

可见，使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题。

要创建 User 对象的新实例，就要使用 new 操作符，使用这个方式构建实例对象，会经过下面 4 个步骤：

1.创建一个新对象；

2.将构造函数的作用域给新对象(因此 this 指向的这个新对象)。

3.执行构造函数内的代码在(为新对象添加属性)；

4.返回新对象。

不过需要注意下面两个问题:

构造函数也是函数

构造函数与函数的唯一区别，就是调用方式的不同，不过，构造函数毕竟也是函数，不存在什么
特殊的定义构造函数的语法。任何函数，只要通过 new 操作符来调用，就可以把它看作是构造函数；
而任何函数，如果不通过 new 操作符调用，它就和普通函数没有什么区别，例如前面定义的 User :

//当作构造函数调用
var user1 = new User('mm', 20);
user1.show(); //ss 10;

//当作普通函数调用
User('mm', 20);
window.show(); //ss 10;

结果上没有什么区别，只是大家可以看到，当作普通函数调用的话，函数里this对象的指向，
其实是指向的 window 全局对象。而通过 new 关键字调用，this 指向的则是新对象而已，所以，
其实还可以这么来写:

var o = new Object();
User.call(o,'ss', 10)；
o.show();

通过函数方法 call 来重新定义对象的作用域，这里不多做解释，讲到函数细节时再仔细介绍这种方法，
这里只是说明可以改变对象的作用域的，其实就是改变 this 的指向

构造函数的问题

构造函数的模式虽然好，但是并非没有缺点。构造函数最大的问题就是，每个方法都要在实例上重
新创建一次。在前面的例子中, user1 和 user2 中都有一个 show 方法，如果我们执行以下语句：

alert(user1.show==user2.show); //结果返回的是 false

结果返回的是 false ，这就说明方法其实也是一种引用地址。如果我们同样重复创建了多个对象，
那么每个对象中的方法都会在内存中开辟新的空间，这样浪费的空间就比较多。要解决这个问题，
我们就需要用到实例属性或者方法的共享。我们可以使用一种变通的方式，来达到我们想要的效果，
也就是让 show 方法不再重复创建

function User(name, age) {
　　this.name = name;
　　this.age = age;
　　this.show = show;
}
function show(){
alert(this.name + ' ' + this.age);
}
将show方法移到外部，相当于 show 方法成了一个全局函数,然后再到 User 构造函数内部去引用 show 方法
，这样 User 内部的 this.show 都指向了同一个全局函数 show ，因此，我们实例化的 user1 和 user2 就
实现了共享，可以再次调用:

alert(user1.show==user2.show); //结果返回的是 true
但是这只是一个测试，如果你要让更多的属性或者方法实现共享，那不是要定义更多的全局函数或
者变量，这种方式是不科学也不可行的。因此，我们需要引入另外一个javascript面向对象的重要
概念原型

(三)

Prototype 原型模式

通过构造函数的弊端引出原型概念

为了讲清楚原型，我们还是必须先回顾一下构造函数的问题，
用一个简单的例子再次讲解一下,我们有一只猫的构造函数，如下:

function Cat(name,color){
this.name = name;
this.color = color;
}

这个构造函数很简单，不再多说，那么现在再为这个函数添加一个不变的属性
"type"（种类），再添加一个方法 eat（吃老鼠）。那么，Cat 就变成了下面这样:

function Cat(name,color){
this.name = name;
this.color = color;
this.type = "猫科动物";
this.eat = function(){alert("吃老鼠");};
}

生成实例:

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，
type 属性和 eat() 方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，
多占用一些内存。这样既不环保，也缺乏效率。

alert(cat1.eat == cat2.eat); //false

因此，为了让 type 属性和 eat() 方法在内存中只生成一次，然后所有实例都指向那个内存地址，
引出了原型

什么是原型？

原型对象实际上就是构造函数的一个实例对象，和普通的实例对象没有本质上的区别。
可以包含特定类型的所有实例的共享属性或者方法。这个 prototype 的属性值是一个对象
（属性的集合），默认的只有一个叫做 constructor 的属性，指向这个函数本身。

比如我们简单定义一个 SuperType 名字的函数，里面什么属性也没有在函数内部是这个样子的

function SuperType(){

}

从上图我们看到，函数里面虽然什么都没有，但是有一个默认的 prototype 属性,它是一个对象，
它指向的是自己的地址，而 prototype 这个对象本身里面又有一个属性 constructor ，而这个
属性，又指向了函数本身,有点绕，你可以通过下面的代码做一下测试，看看效果

alert(SuperType.prototype) //object
alert(SuperType.prototype.constructor) //弹出函数本身function SuperType(){
}

prototype 和 constructor 是原型最基本的概念,现在看可能还有点晕，没关系，
我直接上以前的代码，看看区别,还是之前的 Cat 构造函数，将它修改一下:

function Cat(name,color){
this.name = name;
this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};

生成实例:

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

这时所有实例的 type 属性和 eat() 方法，其实都是同一个内存地址，指向 prototype 对象，
因此就提高了运行效率。

alert(cat1.eat == cat2.eat); //true

Prototype 模式的验证方法
为了配合 prototype 属性，Javascript 定义了一些辅助方法，帮助我们使用它。

isPrototypeOf()

这个方法用来判断，某个 proptotype 对象和某个实例之间的关系。

alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true
hasOwnProperty()

每个实例对象都有一个 hasOwnProperty() 方法，用来判断某一个属性到底是本地属性，
还是继承自 prototype 对象的属性。

alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false

in 运算符
in 运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

alert("name" in cat1); // true
alert("type" in cat1); // true

in 运算符还可以用来遍历某个对象的所有属性。

for(var prop in cat1) {
alert("cat1["+prop+"]="+cat1[prop]);
}

来看一下 javascript 高级程序设计书中对与原型的描述和说明

function Person(){ } //创建Person构造函数
Person.prototype.name = "Nicholas"; //创建共享属性name
Person.prototype.age = 29; //创建共享属性age
Person.prototype.job = "Software Engineer"; //创建共享属性job
Person.prototype.sayName = function(){ //创建共享函数sayName
alert(this.name);
};

//分别创建了 person1 和 person2,里面都有 sayName 函数，并且弹出的值都是一样

var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

通过上面，可以看出，person1 和 person2 ，他们内部都有一个指向 Person.prototype 的指针，
可以通过原型的 isPrototype 方法测试一下

alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
function User(){};
var person3 = new User();
alert(Person.prototype.isPrototypeOf(person3)); //false
alert(User.prototype.isPrototypeOf(person3)); //true

作为类比，我们考虑下JavaScript 中的数据类型 - 字符串（String）、
数字（Number）、数组（Array）、对象（Object）、日期（Date）等。
我们有理由相信，在 JavaScript 内部这些类型都是作为构造函数来实现的，
比如：

// 定义数组的构造函数，作为 JavaScript 的一种预定义类型
function Array() {
// ...
}

// 初始化数组的实例
var arr1 = new Array(1, 56, 34, 12);

// 但是，我们更倾向于如下的语法定义：
var arr2 = [1, 56, 34, 12];

同时对数组操作的很多方法（比如 concat、join、push）应该也是在 prototype 属性
中定义的。实际上，JavaScript所有的固有数据类型都具有只读的 prototype 属性
（这是可以理解的：因为如果修改了这些类型的 prototype 属性，则哪些预定义的
方法就消失了），但是我们可以向其中添加自己的扩展方法。

// 向 JavaScript 固有类型 Array 扩展一个获取最小值的方法
Array.prototype.min = function() {
var min = this[0];
for (var i = 1; i < this.length; i++) {
if (this[i] < min) {
min = this[i];
}
}
return min;
};

// 在任意Array的实例上调用min方法
console.log([1, 56, 34, 12].min()); // 1
注意：这里有一个陷阱，向 Array 的原型中添加扩展方法后，当使用for-in 循环数组时，
这个扩展方法也会被循环出来。下面的代码说明这一点（假设已经向Array 的原型中扩展了 min 方法）：

var arr = [1, 56, 34, 12];
var total = 0;
for (var i in arr) {
total += parseInt(arr[i], 10);
}
console.log(total); // NaN

解决方法也很简单：
var arr = [1, 56, 34, 12];
var total = 0;
for (var i in arr) {
if (arr.hasOwnProperty(i)) {
total += parseInt(arr[i], 10);
}
}
console.log(total); // 103

constructor
constructor
始终指向创建当前对象的构造函数。比如下面例子：

// 等价于 var foo = new Array(1, 56, 34, 12);
var arr = [1, 56, 34, 12];
console.log(arr.constructor === Array); // true

// 等价于 var foo = new Function();
var Foo = function() { };
console.log(Foo.constructor === Function); // true

// 由构造函数实例化一个obj对象
var obj = new Foo();
console.log(obj.constructor === Foo); // true

// 将上面两段代码合起来，就得到下面的结论
console.log(obj.constructor.constructor === Function); // true

但是当 constructor 遇到 prototype 时，有趣的事情就发生了。
我们知道每个函数都有一个默认的属性 prototype ，而这个 prototype 的
constructor 默认指向这个函数。如下例所示：

function Person(name) {
this.name = name;
};
Person.prototype.getName = function() {
return this.name;
};
var p = new Person("ZhangSan");

console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true

// 将上两行代码合并就得到如下结果
console.log(p.constructor.prototype.constructor === Person); // true

当时当我们重新定义函数的 prototype 时
（注意：和上例的区别，这里不是修改而是覆盖），
constructor 的行为就有点奇怪了，如下示例：

Person.prototype = new Object({
getName: function() {
return this.name;
}
});

而 constructor 始终指向创建自身的构造函数，所以此时
Person.prototype.constructor === Object，
即是：

怎么修正这种问题呢？方法也很简单，重新覆盖 Person.prototype.constructor
即可：

对象的 _proto_ 隐式原型

上面我们创建了两个对象, person1 和 person2 ,这两个对象，也都指向了 Person 构造函数的原型,
这是因为每个对象都有一个隐藏的属性——“_proto_”，这个属性引用了创建这个对象的函数的
prototype 。
即：
person1._proto_ === Person.prototype

这个 _proto_ 是一个隐藏的属性，javascript 不希望开发者用到这个属性值，有的低版本浏览器
甚至不支持这个属性值。
看下面的代码:

console.log(Object.prototype);
var obj = new Object();
console.log(obj.__proto__);

你会发现打印了相同的内容:
obj 这个对象本质上是被 Object函数创建的，因此 obj._proto_=== Object.prototype。
我们可以用一个图来表示。
关于隐式原型，主要涉及到原型继承的主要原理，这里只是抛出这个概念稍作介绍

(四)

在不同作用域中
不同的函数和变量声明的意义不同

function Person(name,age){

//在构造函数中,凡是直接用 var 来声明的变量或者函数
//这种,一般称之为私有变量或函数，也就意味着，只能在构造函数中使用
//不能在实例化对象中使用
var address = "成都";

//凡是用 this 声明的变量或者函数,这种一般称之为特权变量或者函数
this.name = name;
this.age = age;
}

//原型中的变量或者函数，一般称之为公有变量或函数
//意味着所有的实例化对象使用的是同一个变量或者函数

Person.prototype = {
constructor:Person,
sex:"男",
show:function(){}
}

// Person.prototype.sex = "男";
// Person.prototype.show = function(){
// };

var user = {

}

(五)

原型（prototype）

每一个函数都有prototype，而prototype又有constructor，最终constructor又指向函数，
它们形成首尾相连的模式。

一、构造函数绑定

先来看下面两个函数的意义：

function ClassA(sColor){
this.color=sColor;
this.sayColor=function(){
alert(this.color);
};
}

function ClassB(sColor,sName){
this.newMethod=ClassA;
this.newMethod(sColor);
delete this.newMethod;
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}

初一看，这种方式貌似很复杂，其实道理很简单，就是在继承的函数里面，新建一个变量
newMethod，然后将 ClassA 的指针指向这个变量，然后在 ClassB 中调用这个方法，这样
实际上 newMethod 引用的作用域也就是说 this 的指向就是 ClassB 实例化的对象了。
注意: 最后一行删除对 ClassA 的引用，这样以后就不能再调用它。所有的新属性和
新方法都必须在删除了新方法的代码后定义，否则覆盖超类的相关属性和方法

为证明前边的有效，运行下面例子

var objA=new ClassA("red");
var objB=new ClassB("blue","Nicholas");
objA.sayColor();
objB.sayColor();
objB.sayName();

由于这种继承方法流行，ECMAScript 为 Function 对象加入了两个新方法，
即 call() 和 apply() ，所以上面的方法完全可以使用 call 或 apply 方法进行替代，
将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

function ClassB(sColor,sName){
//this.newMethod=ClassA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.call(this,sColor);

this.name=sName;
this.sayName=function(){
alert(this.name);
};
}

这里可以看到，前面三行的代码直接改成了 call 方法，所以针对最上面的例子，我们改成下面的样子，
就可以直接实现继承了

function Cat(name,color){
Animal.apply(this, arguments);
this.name = name;
this.color = color;
}
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

二、 prototype模式

第二种方法更常见，使用 prototype 属性。如果"猫"的 prototype 对象，指向一个
Animal 的实例，那么所有"猫"的实例，就能继承 Animal 了。

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat; （在函数中最后写上这行代码，
让函数的prototype.constructor指向函数本身，
这样可以防止指针的错乱。）
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

代码的第一行，我们将 Cat 的 prototype 对象指向一个 Animal 的实例。

Cat.prototype = new Animal();

它相当于完全删除了prototype 对象原先的值，然后赋予一个新值。但是，第二行又是什么意思呢？

Cat.prototype.constructor = Cat;

原来，任何一个 prototype 对象都有一个 constructor 属性，指向它的构造函数。
如果没有 "Cat.prototype = new Animal();" 这一行，Cat.prototype.constructor 是指向
Cat 的；加了这一行以后，Cat.prototype.constructor 指向 Animal 。

alert(Cat.prototype.constructor == Animal); //true

更重要的是，每一个实例也有一个 constructor 属性，默认调用 prototype 对象的 constructor 属性。

alert(cat1.constructor == Cat.prototype.constructor); // true

因此，在运行 "Cat.prototype = new Animal();" 这一行之后，cat1.constructor 也指向 Animal

alert(cat1.constructor == Animal); // true

这显然会导致继承链的紊乱（ cat1 明明是用构造函数 Cat 生成的），因此我们必须手动纠正，
将 Cat.prototype 对象的 constructor 值改为 Cat 。这就是第二行的意思。

转载于:https://www.cnblogs.com/luyanting/p/4112785.html