Js简单原型的用法和原型的动态特性

Js简单原型的用法和原型的动态特性

昨天看了白贺翔老师的Javascript视频(第22个视频),分享一下学习成果ψ(｀∇´)ψ
看下面代码：

<script type="text/javascript" charset="utf-8">

// 一般情况下，给原型添加属性和方法都是通过Person.prototype.属性名/方法名，
// 所以每次都要写Person.prototype.属性名/方法名
// function Person(){

// }

//  一·    简单原型
// function Person(){

// }
//1. 把原型赋给一个空的对象，在里面直接添加属性和方法
// Person.prototype={  //4.所以在用简单原型时
//     constructor:Person,  //必须要添加这个属性
//     name:'z3',
//     age:'21',
//     say:function(){
//         alert("我是原型的方法");
//     },
// };
// var p1=new Person();
// alert(p1.name);  //也可以直接调用
// 2.但是会出现一个问题，就是一般原想的构造器指向的是构造函数也就是本身(PerSon)
//3. 因为付给了一个对象
// alert(Person.prototype.constructor);  //就变成了Object
// 5.添加了constructor属性后
// alert(Person.prototype.constructor);   //就变成了Person
// 6.但是这里又有一个bug,就是原本原型自带constructor属性是不能被枚举的
// 通过这种方法添加上去后，就可以被枚举了,这样是不行的
// for(attr in p1){
//     alert(attr);
// }
// 7.所以针对这个问题 ECMA5 添加了一个新方法
                // Object.defineProperty();   可以给对象原型重新设置构造器的方法
 // 有3个参数  参数1：重设构造器发的对象  参数2：设置什么属性  参数3：options配置项(设置什么)
//   Object.defineProperty(Person.prototype,'constructor',{
//       enumerable:false,//不能被枚举
//       value:Person,
//   });
//   alert(Person.prototype.constructor);
//   for(attr in p1){
//     alert(attr);
// }
// 这时constructor就不会被枚举了


// 二· 原型的动态特性(要注意原型和实例对象创建的先后顺序)
// 一般情况下实例对象可以创建在原型之前
// function Person(){

// }
// var p1=new Person();//实例对象  构造器仍是Person
// Person.prototype.name='z3',
// Person.prototype.say=function(){alert('我可以被调用');};
// alert(p1.name);    //所以这里不会报错
// p1.say();

// 但是  当是  简单原型时，就要一定要先创建对象，在创建实例
function Person(){

}
var p1=new Person();//实例对象  构造器仍是Person
Person.prototype={  //但是在这里复制给{}时，构造器变成了Object，断开了连接
        //    虽然后面在constructor:Person，但是已经发生了动态变化
    constructor:Person,  //必须要添加这个属性
    name:'z3',
    age:'21',
    say:function(){
        alert("我是原型的方法");
    },
};
alert(p1.name); //就为空，会报错
// 这里因为构造器没有发生动态变化，所不会报错
var p2=new Person();
alert(p2.name);



</script>

总之要使用“简单原型”就一定要注意它的： constructor属性和原型的动态特性。

好了，今天就分享学习的这些哈。