IT不死旗下博客隆重开通啦,欢迎各位小伙伴们来围观 。

详解JS中的原型链-1

Javascript Xueqi 1261℃ 0评论
  接下来看js中的原型链:
  代码如下:
function Person(){
 }
Object.prototype.sayHi=function(){
   console.log("我是Object原型对象的sayHi方法!");
};
 Person.prototype.name="LXY";
 Person.prototype.age=22;
 Person.prototype.sayHi=function(){
   console.log(this.name+","+this.age+",");
 };
var p1=new Person();
var p2=new Person();
console.log(p1.name);//'LYX'

p1.sayHi();//'LXY,22'
p2.sayHi();//'LXY,22'
console.log(p1.sayHi===p2.sayHi);//true
 图示如下:


 杂谈:

//虽然在所有的实现中都无法访问到[[Prototype]],可以通过一个方法来访问。测试某个对象是否是某个对象的原型
console.log(Person.prototype.isPrototypeOf(p1)); //true
console.log(Person.prototype.isPrototypeOf(p2));//true

//ECMAScript新增的一个方法:Object.getPrototypeOf() //返回某个对象的原型对象

console.log(Object.getPrototypeOf(p1)); 
console.log(Object.getPrototypeOf(p2));

console.log( Object.getPrototypeOf(p2).constructor);//function Person(){ }
console.log( Object.getPrototypeOf(p2).name);//"LXY"
console.log( Object.getPrototypeOf(p2).age);//22
//这两个方法都是返回Person { name="LXY", age=22, sayHi=function()}



//2.原型链查找,每一个访问对象的一个属性时就有一次原型链查找过程
   function Person(){

   }
   Person.prototype.name="LXY";
   Person.prototype.age=22;
   Person.prototype.sayHi=function(){
     console.log(this.name+","+this.age+",");
   };

   var p1=new Person();
   var p2=new Person();
   p1.name="WFD";
   
   console.log(p1.name);// 'WFD' 来自实例对象p1本身
   console.log(p2.name);// 'LXY'  来自原型对象
   p1.name=null;
   console.log(p1.name);//null
  //删除实例的name属性,从而又可以访问到原型对象的name属性
  delete p1.name;
  console.log(p1.name); // 'LXY'

  
  

   //=======================
  3.//使用hasOwnProperty()方法可以检测一个属性是否存在于对象本身,还是对象的原型中
     function Person(){
     }
     Person.prototype.name="人类";
     Person.prototype.age=150;
     Person.prototype.sayHi=function(){
       console.log(this.name+","+this.age+",");
     };
     var p1=new Person();
     var p2=new Person();
     p1.name="WFD";
  
     //使用hasOwnProperty()方法可以检测一个属性是否存在于对象本身,还是对象的原型中
     console.log(p1.hasOwnProperty("name")); //true p1对象自己有name属性
     console.log(p2.hasOwnProperty("name")); //false p2对象自己m没有name属性,访问得到的是原型对象中的name属性

     delete p1.name; //删除p1对象的name属性
     console.log(p1.hasOwnProperty("name"));//false  
     //============================================
     /*
          使用hasOwnProperty()方法可以检测一个属性是否存在于对象本身,还是对象的原型中
	  单独使用in运算符:通过对象,可以访问给定的属性时就返回true,无论该属性是在对象中还是原型对象中
     */
     console.log("name" in p1); //只要name属性可以访问到,就返回true
     组合两种方法,可以判断某个属性是否存在于原型对象中
     function hasPrototypeProperty(object,name){
     	return !object.hasOwnProperty(name)&& (name in object);
     	//第一个返回false,第二个返回true,则可以说明属性存在于原型对象中
     }
     
     //==============================例子:
     var p1=new Person();
     var p2=new Person();
     p1.name="WFD";
     
     function hasPrototypeProperty(object,name){
      return !object.hasOwnProperty(name)&& (name in object);
      //第一个返回false,第二个返回true,则可以说明属性存在于原型对象中
     }
     var res1=hasPrototypeProperty(p1,'name');
     var res2=hasPrototypeProperty(p2,'name');
     console.log(res1);//false
     console.log(res2);//true
   //=======================================

转载请注明:凌风阁 » 详解JS中的原型链-1

喜欢 (8)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址