原型学习

最新推荐文章于 2023-10-16 09:19:04 发布
最新推荐文章于 2023-10-16 09:19:04 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端 js 文章标签： js原型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011165335/article/details/89041649
版权
前端 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
js
10 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		/*工厂模式
		 
		 * 存在的问题:对象识别问题
		 * */
		 console.log('工厂模式----------------');
        function createObj (name,job) {
        	var obj=new  Object();
        	obj.name=name;
        	obj.job=job;
        	obj.getName=function () {
//      		alert(this.name);
                return this.name;
        	}
        	return obj;
        } 
        
        var person=createObj('小王','java');
        console.log(person.constructor==Object);//true
        console.log(person instanceof Object);//true
        console.log(person.getName());
 
        console.log('工厂模式----------------');

      
       /* 构造函数模式
                    不用写返回值,可以指明对象,但是方法的实例每次都不一样
                    通过new返回对象,一般构造方法的首字母大写
       * */
        console.log('构造器模式----------------');
     function Person (name,age) {
     	 this.name=name;
     	 this.age=age;
     	 this.getName=function  () {
     	 	return this.name;
     	 }
     }
     var person1=new Person('小青',23);
     var person2=new Person('小慌',24);
     console.log(person1==person2);
     console.log(person1.getName==person2.getName);//false
     console.log(person1.constructor==Person);//True
     console.log(person1.constructor==Object);//false
     //其构造器Person属于Object
     console.log(person1.constructor instanceof Object);//true
     //person实例属于Person和Object
     console.log(person1 instanceof Person);//true
     console.log(person1 instanceof Object);//true
     console.log('构造器模式----------------');
     
     //构造函数本身也是函数,可以当做普通函数使用
     Person('哈哈',23);
     console.log(window.getName());
     console.log('构造器模式----------------');
     
     
      /*原型模式
                可以保证,所有的实例均来自原型,  构造函数创建对象实例,实例包含执行原型的指针[[ProtoType]],原型包含构造函数
                实例.constructor=类
        存在的问题:对于原型上面定义的对象,比如数组,不能单独随实例改变
       * */
      //先定义一个空构造函数
     console.log('原型模式----------------');
     function Person2 () {
     }
     
     Person2.prototype.name='初始名字';
     Person2.prototype.age='默认12';
     Person2.prototype.getName=function () {
     	return this.name;
     }
     Person2.prototype.hobbys=['羽毛球','篮球'];
     
     var per1=new Person2();
     var per2=new Person2();
     console.log(per1==per2);//false
     console.log(per1.getName==per2.getName);//true
     console.log(per1.hobbys==per2.hobbys);//true
     console.log(per1.constructor==Person2);//true
     console.log(per1.constructor==Object);//false
     //其构造器Person属于Object
     console.log(per1.constructor instanceof Object);//true
     //person实例属于Person和Object
     console.log(per1 instanceof Person2);//true
     console.log(per1 instanceof Object);//true
     console.log('原型模式----------------');
     
     //实例的属性,遵循就近原则
     // hasOwnProperty:判断是否是实例自身的属性
     // Object.keys:获取一个对象的可枚举的属性
     // Object.getOwnPropertyNames:获取一个对象的所有属性
     // in操作:判断某个属性是否属于这个对象,不区分是否来自原型对象
     per2.name='per2Name';
     console.log(per2.hasOwnProperty('name'));//true
     console.log(per2.hasOwnProperty('age'));//false
     console.log('age' in per1);//true
     console.log('keys:'+Object.keys(per2));//name
     console.log('keys:'+Object.keys(Person2));//
     console.log('keys:'+Object.keys(Person2.prototype));//
     console.log('names:'+Object.getOwnPropertyNames(per2));
     console.log('names:'+Object.getOwnPropertyNames(Person2));
     console.log('names:'+Object.getOwnPropertyNames(Person2.prototype));
     
     console.log('原型模式----------------');
     //简写 
     function  Person3() {
     	
     }
      Person3.prototype={
      	//这里需要重新生命构造函数的对象
      	 constructor:Person3,
      	 name:'来吧',
      	 age:12,
      	 getName:function  () {
      	 	return this.name;
      	 }
      	 
      };
      
     
     
     /*
           混合模式:原型+构造函数
           原型用来定义共享的变量和方法,函数函数用来初始化实例的属性
      * */
     console.log('混合模式---------------');
      function  Person4(name,age) {
     	this.name=name;
     	this.age=age;
     	//默认值
     	this.hobbys=['看球','游泳'];
      }
      Person4.prototype={
      	//这里需要重新生命构造函数的对象
      	 constructor:Person4,
      	 getName:function  () {
      	 	return this.name;
      	 }
      };
      var per41=new Person4('欢欢',23);
      var per42=new Person4('凌达',24);
      per42.hobbys.push('李白');
      console.log(per41.hobbys+'------------'+per42.hobbys);
      console.log(per41.hobbys==per42.hobbys);//false
      console.log(per41.getName==per42.getName);
      console.log(per41 instanceof Person4);
      console.log('混合模式---------------');//true



    /* 原型链
      B的实例执行A的原型对象
      存在的问题:1.还是引用类型问题,因为共享,所以每个实例的引用对象是一样的
     * */
    console.log('原型链----------------');
    function Father (fname) {
//     this.name='fname';
       this.name=fname;
    }
    Father.prototype.getFname=function  () {
    	return this.name+'fuc';
    }
    
    function Son () {
    	this.sname='sun';
    }
    //是Son的原型指向Father的实例
    Son.prototype=new Father('FFname');
    //再定义Son得方法
    Son.prototype.getSonName=function () {
    	return this.sname+'func';
    }
    //测试
    var son=new Son();
	console.log('父类方法:'+son.name);
	console.log('父类属性:'+son.getFname());
	console.log('子类方法:'+son.getSonName());
	console.log('子类属性:'+son.sname);
	console.log(son instanceof Father);
	console.log(son instanceof Son);
	console.log('原型链----------------');
	
	
	/*借用构造函数
		可以实现:向父类传值,引用对象分别实例化
	*/
	console.log('----原型链--构造函数模式------------');
	function Father2 (fname) {
		this.name=fname;
		this.colors=['red','green','black'];
		this.getFname=function  () {
			return this.name+'fuc';
		}
	}
	
	function Son2 (age,fname) {
		//每次初始化Son2,会对Father2重新初始化
		Father2.call(this,fname);
		this.age=age;
		this.getSonName=function  () {
			return this.age+'fuc';
		}
	}
	
	var son2=new Son2(12,'fffname1');
	var son3=new Son2(12,'fffname2');
	son2.colors.push('blue');
	//每个实例各自享有自已的引用变量,但是有些需要共享的变量确没有
	console.log('color'+son2.colors);
	console.log('color'+son3.colors);
	//这里想让name共享,但是构造函数式实现不了的
	console.log('name:'+son2.name);
	console.log('name:'+son3.name);
	
    console.log('父类方法:'+son2.name);
	console.log('父类属性:'+son2.getFname());
	console.log('子类方法:'+son2.getSonName());
	console.log('子类属性:'+son2.age);
	console.log(son2 instanceof Father2);//false
	console.log(son2 instanceof Son2);//true
	
	console.log('----原型链--构造函数模式------------');
	
	
	
	/*组合模式
	 原型链:用来定义共享的属性和方法
	 构造函数:用来定义不需要共享的属性对象
	 * */
	console.log('----原型链+构造函数组合模式--推荐----------');
	function Father3 (fname) {
		this.name=fname;
		this.colors=['red'];
	}
	//方法共享
	Father3.prototype.getFname=function  () {
		return this.name+'fuc';
	}
	
	//继承属性
	function Son3 (age,fname) {
		Father3.call(this,fname);
		this.age=age;
	}
	
	//继承方法  这里虽然可以给Father3传参,但是没必要
	Son3.prototype=new Father3();
//	Son3.prototype.constructor=Father3;
	Son3.prototype.getSonName=function  () {
		return this.age+'func';
	}
	
	//测试
	var  s1=new Son3(11,'fatherName');
	var  s2=new Son3(13,'ffffffffff');
	s1.colors.push('blue');
	//每个实例各自享有自已的引用变量,但是有些需要共享的变量确没有
	console.log('color:'+s1.colors);
	console.log('color:'+s2.colors);
	console.log(s1.getFname==s2.getFname);//true
	
    console.log('父类方法:'+s1.name);
	console.log('父类属性:'+s1.getFname());
	console.log('子类方法:'+s1.getSonName());
	console.log('子类属性:'+s1.age);
	console.log(s1 instanceof Father3);//true
	console.log(s1 instanceof Son3);//true
	
	console.log('----原型链+构造函数组合模式--推荐----------');
	</script>
	
	
	
	<body>
		
		
	</body>
</html>
尚云峰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PCL:用于“无监督表示的原型对比学习”的PyTorch代码
05-07
无监督表示的典型对比学习（Salesforce研究） 这是的PyTorch实现： @article{PCL, title={Prototypical Contrastive Learning of Unsupervised Representations}, author={Junnan Li and Pan Zhou and Caiming Xiong and Steven C.H. Hoi}, journal={ICLR}, year={2021} } 要求： ImageNet数据集 Python≥3.6 PyTorch≥1.4 ：点安装faiss-gpu 点安装tqdm 无监督培训： 此实现仅支持多gpu的DistributedDataParallel训练，该训练更快，更简单； 不支持single-gpu或DataParallel培训。 要使用4-gpu或8
js原形链
weixin_34337265的博客
05-27 106
基本规则 1.每个对象都具有一个名为__proto__的属性； 2.每个构造函数（构造函数标准为大写开头，如Function()，Object()等等JS中自带的构造函数，以及自己创建的）都具有一个名为prototype的方法（注意：既然是方法，那么就是一个对象（JS中函数同样是对象），所以prototype同样带有__proto__属性）； 3.每个对象的__proto__属性指向自身构造...
深入学习之原型和原型模式
测试0901-1
07-19 209
 //1、每一个函数数据类型(普通函数、类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值    //2、并且在prototype上浏览器天生给它加了一个属性constructor(构造函数),属性值是当前函数(类)本身    //3、每一个对象数据类型(普通的对象、实例、prototype...)也天生自带一个属性：__proto__，属性值是当前实例所属...
原型的学习总结（刚刚开始的）
qq_55061624的博客
06-07 1688
如上图 此图是
JavaScript 原型学习总结
10-28
每个对像都有一个隐慝的属性用于指向到它的父对像（构造对像的函数）的原型(这里称为父原型或隐式原型），并从中继承它的属性和方法
折叠导航系统原型学习.rp
10-23
折叠导航系统原型学习.rp
原型学习资料.docx
最新发布
05-01
原型学习资料.docx
JavaScript中的prototype原型学习指南
10-22
主要介绍了JavaScript中的prototype原型学习指南,包括原型链与原型继承等重要知识,需要的朋友可以参考下
有关原型的学习
qq_42926749的博客
08-13 297
今天开始学高级的部分，感觉还是蛮…复杂的。对我来说，其实理解会用自然可以了，学习得越多自然就会对复杂的概念有所了解。 先贴一部分今天上课时的代码： function Style(btnId, divId, bgColor,color) { this.bgColor = bgColor; this.color = color; this...
学习：原型（Prototype）
iamxi的专栏
08-19 218
很少见到，我都没遇到过，或是遇到过也没注意。   意图： 用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。   结构： Prototype     ——声明一个克隆自身的接口 ConcretePrototype     ——实现一个克隆自身的操作   协作： 客户请求一个原型克隆自身。   示例代码: public abstract...
原型和原型链学习(一)
兴尽晚回舟
07-05 379
文章目录先了解 普通对象与函数对象构造函数原型对象：prototype（原型） 先了解 普通对象与函数对象 JavaScript中，万物皆对象，但是对象也是有区别的，Object 和 function 是 JS 自带的函数对象。下面举例： console.log(typeof Object); //function console.log(typeof Function); //funct...
学习原型后的总结
u013578042的博客
01-22 832
下面内容是查询网上关于原型资料之后的总结，图片也是网上截取，想要学习更详细的原型与闭包只是给大家推荐已连接：http://www.cnblogs.com/wangfupeng1988/p/3977924.html 明确几个名名词：Object、Array、Function 了解几个答案： //typeof 返回的结果都是小写字母组成的“字符串” var arr = new Array();
Javascript原型学习
可以叫我啪叽的石头
10-09 121
prototype是函数才有的一个属性。 函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。 原型可以理解成：每一个 JS 对象（null 除外），在创建的时候，就会与之关联另一个对象，这个对象就是我们说的原型。每个对象都会从原型继承属性。 每一个 JS 对象（null 除外）都有一个_proto_的属性，该属性指向该对象的原型。 每...
原型学习笔记
cindy_rain的博客
02-25 670
参考《Javascript高级程序设计》 参考JavaScript探秘：强大的原型和原型链 参考js原型链原理看图说明 参考深入理解javascript原型和闭包 什么是原型？原型是一个对象，其他对象可以通过它实现属性继承。任何一个对象都可成为原型。哪些对象具有原型？所有对象在默认情况下都有一个原型，因为原型本身也是对象，所以每个原型自身又是一个原型（例外，默认的对象原型在原型链的最顶端）。
学习原型总结
Zrf2191318455的博客
10-16 243
JavaScript、原型基础理解
Axure学习——我的第一个原型设计
lwycc2333的博客
10-08 2556
我的第一个原型设计——模仿知乎的注册界面一.模仿什么？模仿一个网站，从两个方面来看。首先是用元件所呈现的这个界面最直观的部分，然后就是交互部分。1.元件布局首先我们来看一下知乎注册界面： 从这个布局，我们很容易分析出来它的各个元件，如下：2.交互效果从上往下看（1）logo和标语，没有什么交互效果，只需要填充相应的数据就可以了。（2）注册矩形框，和下面的条条一样是蓝色的，当点击登陆矩形框的时候，注
原型模式学习和思考
阿贵的专栏
10-27 353
1.概念：原型模式（Prototype）用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。 2.理解：原型模式其实就是从一个对象再创建另外一个可定制的对象，而且不需知道任何创建的细节。
原型模式学习总结
江川的博客
03-22 975
目录 原型模式 引言 定义 模式结构图 实例 实例描述 实例类图 代码实现 模式扩展 深克隆和潜克隆 原型管理 总结 模式优点 模式缺点 原型模式 引言 原型模式是一种特殊的创建型模式，当需要创建大量相同或相似的对象时，可以通过对一个已有的对象的复制获取更多对象。 定义 英文定义："Specify the kind of objects to creat...
自然语言处理领域的原型对比学习
03-26
原型对比学习是自然语言处理领域中的一种学习方法，它主要用于解决文本分类、信息检索和情感分析等任务。该方法通过比较输入文本与已知类别的原型之间的相似度来进行分类。 在原型对比学习中，首先需要构建类别的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值