【前言】
在学习到javascript面向对象和原型的时候其实我感觉有一点点的难度,反正在理解这方面的含义的时候我发现很乱,但是面向对象的思想我们早就接触过,只是在javascript中它会和以前的语言有一点稍稍的不一样,但是褪去了外衣后发现其实里面的精髓都是一样!
【内容】
一:对象
1. 面向对象的特征:封装性,继承性,多态性在javascript都有体现。
Javascript中的对象:是一种复合的,复杂的数据类型,是属性和方法的集合
/*创建对象的两种方式:
1.使用new运算符创建对象。
var obj=new Object();
2.使用特定的构造函数;
var obj=Object();
3.通过字面量的方式
var student={
name:'常银玲',
age:22,
gender:女
}
*/
2.普通函数和构造函数都是体现了面向对象的思想,他们之间的区别:
//普通函数
function box(name, age)
{
var obj = new Object(); //创建对象
obj.name = name; //添加属性
obj.age = age;
obj.run = function () { //添加方法
return this.name, this.age + '运行中。。。';
}
return obj; //返回对象引用。
}
//构造函数
function Box(name, age) {
this.name = name;
this.age = age;
this.run = function () {
return this.name + this.age + '运行中。。。';
};
};
//调用普通函数
var box=box('chang','100');
//调用构造函数
var box=new Box('chang','100');
由上表可以看出普通函数与构造函数之间的区别:
普通函数 | 构造函数 | |
---|---|---|
命名方式 | 函数名第一个字母小写 | 函数名第一个字母大写 |
函数引用 | 返回函数引用 | 不用返回,直接使用 |
调用方式 | 用new关键字 | 直接调用函数 |
定义方式 | 用new object初始化 | 直接用this,代替了new object |
区分返回的对象类型 | 不区分 | 区分 |
二:原型
1.原型(prototype):既是属性,也是一个对象,包含由特定类型的所有实例共享的属性和方法。
2.原型模式是一把双刃剑:省略构造函数传参的初始化,但是却令初始化的值都是一样的。如下
//原型模式,对比上面的构造函数即可。
function Box(){};
Box.prototype.name='chang';
Box.prototype.age=100;
Box.prototype.run=function(){
return this.name+this.age;
}
var box1=new Box();
alert(box1.run()); //返回的是chang100,
var box2=new Box();
alert(box2.run()); //返回的是chang100,
原型模式优点是共享,但是共享带来的是污染数据。如下:
function Box() { }
Box.prototype = {
constructor: Box,
name: 'lee',
age: 100,
family: ['哥哥','姐姐','妹妹'],
run:function(){
return this.name + this.age + '运行中....'
}
}
var box1=new Box();
var box2=new Box();
box1.family.push('弟弟');
alert(box1.family); //返回的成员都是哥哥,弟弟,妹妹,弟弟。
alert(box2.family); //返回的成员都是哥哥,弟弟,妹妹,弟弟。
改进的措施原型模式缺点的措施:
/*动态原型模式*/
/*将原型封装在一个构造函数里面,原型的初始化只要一次就可以了,不需要每一次构造函数都实例化*/
function Box(name, age) {
this.name = name;
this.age = age;
this.family = ['哥哥', '姐姐', '妹妹'];
if (typeof this.run!='function') { //判断thisrun是否存在。
alert('原型初始化开始')
Box.prototype.run = function () {
return this.name + this.age + '运行中....';
}
alert('原型初始化结束')
}
}
var box1 = new Box('chang',100);
var box2 = new Box('jin', 22);
三:继承
1.继承是面向对象的一大特征,包括了接口实现和继承,但是js值只支持继承。
2.js中继承的两种方式主要是对象冒充和原型链。
//通过原型链的方式继承。
function Box(){ //构造函数Box
this.name='lee';
}
function Desk(){ //构造函数desk
this.age=100;
}
Desk.prototype=new Box(); //desk继承了box,通过原型,形成链条。
var desk=new Desk();
alert(desk.name); //返回的是lee
//通过对象冒充的方式继承。
function Box(name,age){ //构造函数Box
this.name=name;
this.age=age;
}
function Desk(name,age){ //主要是对象冒充的形式。
Box.call(this.age);
Box.call(this.name);
}
var desk=new Desk('chang','22');
alert(desk.name); //返回的是lee
【总结】
其实在学习本章节主要的难点就是对于对象和原型之间组合的优化,其中有一些用到了一些设计模式,都是需要我们细细的去研究一把,不过在优化之前应该掌握一些基本的东西,希望这篇博客可以帮到你!