zoukankan      html  css  js  c++  java
  • js创建对象之原型模式1

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			//创建对象
    			//原型模式
    			//每一个function都有一个prototype
    			//所有new出来的对象都可以共用proptotype的属性和方法
    			function Person(){}
    			Person.prototype.name = "宝清老窖";
    			Person.prototype.sayName = function(){
    				alert(this.name);
    			}
    			
    			var person1 = new Person();
    			person1.sayName();//宝清老窖
    			
    			var person2 = new Person();
    			person2.sayName();//宝清老窖
    			alert(person1.sayName == person2.sayName);//true
    			//person1跟person2访问的都是同一组属性和同一个sayName方法
    			
    			//------------------------------------------------------------------------
    			//1、理解原型对象
    			//无论什么时候,只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性
    			//这个属性指向了函数的原型对象
    			//在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,
    			//这个属性指向了protoype所在函数的指针
    			//即:Person.prototype.constructor指向了Person
    			//创建类自定义的构造函数之后,其原型对象默认只会取得construnctor属性;
    			//至于其他方法,则都是从Object继承而来的。
    			//当调用构造函数new一个实例后,该函数内部包含一个指针叫[[Prototype]],指向原型对象
    			//但是在Chrome、Firefox浏览器里面这个属性名字叫__proto__
    			alert(person1.__proto__ == person2.__proto__);	//true
    			
    			alert(person1.__proto__ == Person.prototype);	//true
    			alert(person2.__proto__ == Person.prototype);	//true
    			
    			alert(Person.prototype.constructor == Person);	//true
    			//虽然person1和person2都没有属性,但是却都能调用sayName方法
    			//这是一个查找过程,即:实例没有属性的话,就去原型里面找
    			
    			//isPrototypeOf方法来确定对象之间是否存在这种关系
    			alert(Person.prototype.isPrototypeOf(person1));	//true
    			alert(Person.prototype.isPrototypeOf(person2));	//true
    			
    			//获取[[Propertype]]的值
    			alert(Object.getPrototypeOf(person1) == Person.prototype); //true
    			Object.getPrototypeOf(person1).sayName();	//宝清老窖
    			//Object.getPrototypeOf()获取对象原型很方便,在实现继承的情况下非常重要
    			
    			//当代吗读取对象的某个属性的时候,都会执行一次搜索
    			//首先从对象实例本身开始,如果找到返回该值
    			//如果没有找到,就查找原型对象,如果找到就返回
    			//所以,在我哦们调用person1.sayName()的时候,会执行两次搜索
    			//这正是多个对象实例共享原型所保存的属性和方法的原理
    			
    			//--------------------------------------------------------------
    			function Person(){}
    			
    			Person.prototype.name = "宝清老窖";
    			Person.prototype.sayName = function(){
    				alert(this.name);
    			}
    			
    			var person1 = new Person();
    			var person2 = new Person();
    			
    			person1.name = "大美女";
    			person1.sayName();	//来自实例		大美女
    			person2.sayName();	//来自原型		宝清老窖
    			//所以名字相同情况下,实例属性会屏蔽原型属性
    			//可以通过delete删除实例属性,从而重新打开重新打开原型属性
    			delete person1.name;
    			person1.sayName();	//来自原型		宝清老窖
    			
    			//使用hasOwnProperty();可以检查一个对象是否在实例中
    			Person.prototype.age = 100;
    			person1.age = 20;
    			console.log(person1.hasOwnProperty('age'));	//true
    			console.log(person2.hasOwnProperty('age'));	//false
    		</script>
    	</body>
    </html>
    

      提取出js

    	//创建对象
    			//原型模式
    			//每一个function都有一个prototype
    			//所有new出来的对象都可以共用proptotype的属性和方法
    			function Person(){}
    			Person.prototype.name = "宝清老窖";
    			Person.prototype.sayName = function(){
    				alert(this.name);
    			}
    			
    			var person1 = new Person();
    			person1.sayName();//宝清老窖
    			
    			var person2 = new Person();
    			person2.sayName();//宝清老窖
    			alert(person1.sayName == person2.sayName);//true
    			//person1跟person2访问的都是同一组属性和同一个sayName方法
    			
    			//------------------------------------------------------------------------
    			//1、理解原型对象
    			//无论什么时候,只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性
    			//这个属性指向了函数的原型对象
    			//在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,
    			//这个属性指向了protoype所在函数的指针
    			//即:Person.prototype.constructor指向了Person
    			//创建类自定义的构造函数之后,其原型对象默认只会取得construnctor属性;
    			//至于其他方法,则都是从Object继承而来的。
    			//当调用构造函数new一个实例后,该函数内部包含一个指针叫[[Prototype]],指向原型对象
    			//但是在Chrome、Firefox浏览器里面这个属性名字叫__proto__
    			alert(person1.__proto__ == person2.__proto__);	//true
    			
    			alert(person1.__proto__ == Person.prototype);	//true
    			alert(person2.__proto__ == Person.prototype);	//true
    			
    			alert(Person.prototype.constructor == Person);	//true
    			//虽然person1和person2都没有属性,但是却都能调用sayName方法
    			//这是一个查找过程,即:实例没有属性的话,就去原型里面找
    			
    			//isPrototypeOf方法来确定对象之间是否存在这种关系
    			alert(Person.prototype.isPrototypeOf(person1));	//true
    			alert(Person.prototype.isPrototypeOf(person2));	//true
    			
    			//获取[[Propertype]]的值
    			alert(Object.getPrototypeOf(person1) == Person.prototype); //true
    			Object.getPrototypeOf(person1).sayName();	//宝清老窖
    			//Object.getPrototypeOf()获取对象原型很方便,在实现继承的情况下非常重要
    			
    			//当代吗读取对象的某个属性的时候,都会执行一次搜索
    			//首先从对象实例本身开始,如果找到返回该值
    			//如果没有找到,就查找原型对象,如果找到就返回
    			//所以,在我哦们调用person1.sayName()的时候,会执行两次搜索
    			//这正是多个对象实例共享原型所保存的属性和方法的原理
    			
    			//--------------------------------------------------------------
    			function Person(){}
    			
    			Person.prototype.name = "宝清老窖";
    			Person.prototype.sayName = function(){
    				alert(this.name);
    			}
    			
    			var person1 = new Person();
    			var person2 = new Person();
    			
    			person1.name = "大美女";
    			person1.sayName();	//来自实例		大美女
    			person2.sayName();	//来自原型		宝清老窖
    			//所以名字相同情况下,实例属性会屏蔽原型属性
    			//可以通过delete删除实例属性,从而重新打开重新打开原型属性
    			delete person1.name;
    			person1.sayName();	//来自原型		宝清老窖
    			
    			//使用hasOwnProperty();可以检查一个对象是否在实例中
    			Person.prototype.age = 100;
    			person1.age = 20;
    			console.log(person1.hasOwnProperty('age'));	//true
    			console.log(person2.hasOwnProperty('age'));	//false
    

      

  • 相关阅读:
    【移动端】300ms延迟以及点透事件原因以及解决方案
    javaScript drag对象进行拖拽使用详解
    js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)
    Linux常用bash命令
    一些好的关于网络知识的博客
    python 2 处理HTTP 请求的包
    python 3 处理HTTP 请求的包
    接口测试笔记
    接口测试资料
    PyH : python生成html
  • 原文地址:https://www.cnblogs.com/xudy/p/5421902.html
Copyright © 2011-2022 走看看