您的位置：首页 > 其它
传统构造函数存在的问题以及解决方法（原型）

2017-06-21 09:27 253 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//写一个构造函数，用来创建学生对象
//属性：姓名 年龄 身高 体重
//行为：学习  吃饭  看片 把妹

function studyMethod(){
console.log("我叫"+ this.name +"Good Good Study Day Day Up");
}

function Student(stuName) {
this.name = stuName;
this.study = studyMethod;
//方法* 8*10^20
}

//如果构造函数没有参数，那么在调用的时候 小括号 可以省略
var stu = new Student("geng");
stu.study();

var stu1 = new Student("li");
stu1.study();

//如果在构造函数中定义函数，那么每次创建对象，都会重新创建该函数
//但是函数内部代码完全相同，就造成了资源浪费
//为了处理这个问题，我们要让所有的对象共用一个方法
//在构造函数外部定义好该函数，将该函数赋值给构造函数内的方法

//使用这种方式写好的方法中的this指向的就是调用该方法的对象
//this 谁调用就是谁

//******使用这种方式存在的问题********
//1.全局变量增多，造成污染
//2.代码结构混乱，不易维护

//---------------解决办法：用原型，简单介绍一下：------------------------------
function Person(name, status) {
this.name = name;
this.status = status;
this.act = function () {
console.log("演戏");
};
this.exercise = function () {
console.log("就不强身健体");
}
}

var p = new Person("xyz","single");

//p.exercise();

//原型是个什么玩意儿？
//在构造函数创建出来的时候，系统会默认的帮构造函数创建并关联一个神秘的对象，这个对象就是原型
//原型默认的是一个空的对象

//原型的作用
//原型中的属性和方法 可以被使用该构造函数创建出来的对象 使用

//如何访问构造函数的原型
// 构造函数.prototype
console.log(Person.prototype);
console.log(p.prototype); //注意 prototype是构造函数的属性，跟对象没有关系

//如何给原型对象添加属性和方法？
//使用对象的动态特性

Person.prototype.exercise = function () {
console.log("强身健体，保卫祖国");
}

p.exercise();

//当使用对象去访问属性和方法的时候
//会首先在对象自己内部进行查找，如果找到了，就直接使用
//如果没有找到，就去原型中查找，查找到之后，使用
//如果原型中还没有， 如果是属性，就是Undefined
//如果是方法，就报错

//p.sing();  //本身和原型中都没有 就报错

// -----------------------用原型的办法构造函数---------------------------------
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
//            this.sayHello = function () {
//                console.log("你好我是" + this.name);
//            }
}

var p =new Person("张学友",18,"male");

var p1 = new Person("刘德华",19,"male");

Person.prototype.sayHello = function () {
console.log("你好我是" + this.name);
}

Person.prototype["sing"] = function () {
console.log("一千个伤心的母牛");
}

p.sayHello();
p1.sayHello();

p.sing();
p1.sing();
//如何使用原型来解决构造函数存在的问题？
//构造函数的原型对象中的成员，可以被该构造函数创建出来的所有对象访问
//而且，所有的对象共享该对象
//所以，我们可以将构造函数中需要创建的函数，放到原型对象中存储
//这样就解决 全局变量污染的问题 以及 代码结构混乱的问题()；

</script>
</head>
<body>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航