javascript学习笔记(九) js对象 设计模式

所属分类: 网络编程 / JavaScript 阅读数: 1263
收藏 0 赞 0 分享
1.创建对象

复制代码 代码如下:

var person = new Object();
person.name = "RuiLiang";
person.age = 30;
person.job = "Teacher";
person.sayName = function () {
alert(this.name);
};

person.sayName();

2.工厂模式
缺点:不能识别对象

复制代码 代码如下:


function createPerson(name,age,job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
alert(this.name);
};
return o;
}

var person1 = createPerson("阿亮",30,"教师");
var person2 = createPerson("俊俊",24,"待业");

person1.sayName(); //"阿亮"
person2.sayName(); //“俊俊”

3.构造函数模式
缺点:缺少封装性

复制代码 代码如下:

function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {
alert(this.name);
}

var person1 = new Person("阿亮",30,"教师");
var person2 = new Person("俊俊",24,"待业");
person1.sayName();
person2.sayName();

4.原型模式
缺点:所有属性被实例共享

复制代码 代码如下:

function Person() {
}

Person.prototype.name = "ALiang";
Person.prototype.age = 30;
Person.prototype.job = "Teacher";
Person.sayName = function () {
alert(this.name);
}

hasOwnProperty()方法检测某一属性是不是实例属性,如果是返回 true

person1.hasOwnProperty("name"); //name是不是person1的属性
in 操作符:通过对象访问的属性是否存在,若存在返回 true,不管属性存在实例中还是原型中

alert("name" in person1); //name属性若存在返回 true
确定属性在原型中还是对象中的方法:

复制代码 代码如下:

function hasPrototypeProperty(object,name) {
return !object.hasOwnProperty(name) && (name in object);
}
//用法
var person = new Person();
alert(hasPrototypeProperty(person,"name")); //true
person.name = "Grey"; //改变原型中name的值
alert(hasPrototypeProperty(person,"name")); //false

isPrototypeOf()方法是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false。
格式如下:
object1.isPrototypeOf(object2);
object1是一个对象的实例;
object2是另一个将要检查其原型链的对象。
原型链可以用来在同一个对象类型的不同实例之间共享功能。
如果 object2 的原型链中包含object1,那么 isPrototypeOf 方法返回 true。
如果 object2 不是一个对象或者 object1 没有出现在 object2 中的原型链中,isPrototypeOf 方法将返回 false。

复制代码 代码如下:

//字面量重写原型对象
function Person(){
}

Person.prototype = {
constructor : Person,
name : "ALiang",
age : 30,
job : "Teacher",
sayName : function() {
alert(this.name);
}
};

5.构造函数和原型混合模式
具有构造函数模式和原型模式的优点,属性用构造函数模式,方法用原型模式 //这种模式使用最广泛
复制代码 代码如下:

function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["xuyun","wuxueming"];
}
Person.prototype = {
constructor : Person,
sayName : function() {
alert(this.name);
}
};

var person1 = new Person("ALiang",30,"Teacher");
var person2 = new Person("ZuNan",26,"Teacher");
person1.friends.push("JunJun");
alert(person1.friends); //"xuyun","wuxueming","JunJun"
alert(person2.friends); //"xuyun","wuxueming"

6.动态原型模式

复制代码 代码如下:

function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;

if (typeof this.sayName != "function"){ //这里的sayName可以是任何初始化后存在的方法或属性
Person.prototype.sayName = function() { //不能用字面量形式
alert(this.name);
};
}

7.寄生构造函数模式
8.稳妥构造函数模式
更多精彩内容其他人还在看

Vue组件选项props实例详解

父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript将url解析为json格式的两种方法

本篇文章主要介绍了javascript将url解析为json格式的两种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

详解JS数组Reduce()方法详解及高级技巧

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。接下来通过本文给大家分享JS数组Reduce()方法详解及高级技巧,一起看看吧
收藏 0 赞 0 分享

JS模拟超市简易收银台小程序代码解析

本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
收藏 0 赞 0 分享

JavaScript 完成注册页面表单校验的实例

下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

简单的网页广告特效实例

下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue内容分发slot(全面解析)

下面小编就为大家带来一篇Vue内容分发slot(全面解析)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue自定义事件(详解)

下面小编就为大家带来一篇Vue自定义事件(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Mui使用jquery并且使用点击跳转新窗口的实例

下面小编就为大家带来一篇Mui使用jquery并且使用点击跳转新窗口的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

深入理解ES6的迭代器与生成器

本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多