js17---创建对象:构造函数式和原型组合模式、动态原型模式、稳妥构造函数式
2024-08-31 14:13:42
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type=text/javascript charset=utf-8 >
//自定义原型对象会改变原型对象的构造器。
//原型的概念: 原型对象里的所有属性和方法 被所有构造函数实例化出来的对象所共享
function Person(){}
Person.prototype = {
constructor:Person ,
name: 'z3' ,
age: 20 ,
job : '程序员' ,
friends : ['李四','王五'] ,
sayName : function(){alert('我的名字!')}
};
var p1 = new Person();
var p2 = new Person();
p1.friends.push('赵六');//数组的.push方法
alert(p1.friends);//改了
alert(p2.friends); //我们一般组合使用构造函数式和原型模式,在实际开发中,这种模式也是应用的最为广泛。
// 组合使用原型和构造函数式 (定义一个类 开发时常用的方式),不能只用构造函数式或只用原型式。
function Person(name , age , friends , job){
this.name = name ;
this.age = age ;
this.friends = friends ;
this.job = job ;
}
Person.prototype = {
constructor: Person ,
sayName : function(){
alert(this.name);//谁调用sayName,this就是谁
}
};
var p1 = new Person('z3' , 20 , ['王五','赵六'] , '技术总监');
var p2 = new Person('李四', 25 , ['王五','赵六' ,'赵7'] ,'boss');
alert(p1.friends);
p1.sayName();
alert(p2.friends);
p2.sayName(); //动态原型模式:(让你的代码 都封装到一起)。动态原型模式:就是把信息都封装到函数中,这样体现了封装的概念。
function Person(name , age , friends , job){
this.name = name ;
this.age = age ;
this.friends = friends ;
this.job = job ;
//动态原型方法:
if( typeof this.sayName != 'function'){//第一次new一个Person的时候会在原型添加这个方法,第二次new Person对象的时候就不会创建了。typeof是小写的function,constructor是大写的Function
Person.prototype.sayName = function(){
alert(this.name);
}
}
}
/*
var o = {
name:2,
age:"22"
}
alert(o.sayName);//undefined
alert(typeof o.sayName);//undefined
*/ //稳妥构造函数式: durable object(稳妥对象) 非常安全的环境中
// 1 没有公共属性 , 2 不能使用this对象
function Person(name , age , job){
// 创建一个要返回的对象,工厂模式,
var obj = new Object();
//可以定义一下私有的变量和函数 private,js里面是var局部变量,外部访问不了,内部函数使用,类似于java里面通过private声明一些变量方法。
var name = name ;
//var sex = '男';
//var saySex = function(){};
//添加一个方法
obj.sayName = function(){
alert(name);
}
return obj ;
}
var p1 = new Person('张三');
p1.sayName();
</script>
</head>
<body>
</body>
</html>
最新文章
- github最简单的操作方法
- windows下快速启动 nginx 和 php-cgi 的两个批处理
- php __FILE__,__CLASS__等魔术变量,及实例(转)
- hihoCoder #1182 欧拉路&#183;三 (变形)
- 用phpMyAdmin修改mysql数据库密码
- MongoDB深圳用户组线下活动召集
- 对xlslib库与libxls库的简易封装
- stock 财务 指标
- Vue学习之路---No.4(分享心得,欢迎批评指正)
- Android的stateListDrawable,layerDawable,clipdrawable,AnimationDarwable介绍-android学习之旅(五十五)
- springboot~添加新模块的方法
- 【XSY2484】mex 离散化 线段树
- easyui中combobox 取值
- missing python bz2 module
- mysql 启动失败,数据恢复
- js对键盘输入事件绑定到特定按钮
- oracle listagg函数、lag函数、lead函数 实例
- Django(四)模板文件中的循环
- 解决以showModalDialog打开的页面在提交表单时弹出新窗口的问题
- laravel5.5源码笔记(一、入口应用的初始化)