zoukankan      html  css  js  c++  java
  • js面向对象

     
    js比较特殊,没有类的概念,js中的对象定义为:"无序的属性的集合,其属性可以包含基本值,对象或者函数".js的对象可以直接理解为散列表.
    对象的每个属性或者方法都有一个名字,而每个名字都映射到一个值.无非就是一组键值对,其中的值可以是数据或者是函数
    每个对象都是基于一个引用类型来创建的,这个引用类型可以是js中的原生类型,也可以是开发人员自定义的类型.
     
    可以这么定义一个对象

        
     1 var per = {
     2         name:"勒布朗",
     3         age : 29,
     4         job : 'Software Engineer',
     5         sayName : function(){
     6             console.debug(this.name);
     7         },
     8         changeName : function(name){
     9             this.name = name;
    10         }
    11         
    12     };
    13     per.sayName();//输出 勒布朗 

    对象的属性具有其属性特性(可以联想到java中的属性有private,static等特征属性),ECMAScript中有两种属性:数据属性和访问器属性
     
     

    JavaScript创建对象的几种方式
     
    /**
       工厂模式创建对象
    **/
    	//工厂模式demo1  使用创建对象 返回对象的方式
    	function createPerson(nameStr) {
    		var per = new Object();
    		per.name = nameStr;
    		per.sayName = function (){
    			console.debug(this.name);	
    		};
    		per.toString = function(){
    			return this.name;
    		}
    		return per;
    	}
    	 
    	var p1 = createPerson('Tom');
    	var p2 = createPerson('Jack');
    	p1.sayName();
    	p2.sayName();
    	 
    	var ps = [];
    	ps.push(p1);
    	ps.push(p2);
    	alert(ps);
    	console.debug(ps);
    	
    	//工厂模式生成对象 demo2 使用对象字面量的方式创建对象
    	function createDog(nameStr){
    		var dog = {
    			name : nameStr,
    			sayName : function (){
    				console.debug(this.name);	
    			},
    			toString : function(){
    				return this.name;
    			}
    		};
    		return dog;
    	}
    	var d1 = createDog('Tom');
    	var d2 = createDog('Jack');
    	d1.sayName();
    	d2.sayName();
    	 
    	var ps = [];
    	ps.push(d1);
    	ps.push(d2);
    	console.debug(ps);
    

      

    2.使用构造函数模式创建对象
    (1).创建一个对象
    (2).将构造函数的作用域给新对象(因此this就指向了这个新对象)
    (3).执行构造函数中的代码(为这个新对象添加属性)
    (4).返回新对象
     
    1. //构造器模式创建对象
    2. functionPerson(name, age, job){//构造方法创建对象
    3. //构造方法内部不需要显式的new对象
    4. this.name = name;
    5. this.age = age;
    6. this.job = job;
    7. this.sayName =function(){
    8. console.debug(this.name);
    9. console.debug(this.age);
    10. console.debug(this.job);
    11. }
    12. //构造方法内部不需要显式的返回对象
    13. }
    14. //使用构造方法时,需要new操作创建对象
    15. var per =newPerson('Lebron',27,'SoftWareEngineer');
    16. per.sayName();
     
     
    每一个被创建的对象,都包含有构造函数这个属性,比如上面创建的per对象,包含有构造函数Person(),见下图
     

     
     
     
    如果创建两个Person类型的对象,发现他们的构造器属性都是指向的函数Person()
     
    1. var per1 =newPerson('Lebron',27,'SoftWareEngineer');
    2. console.debug(per1);
    3. var per2 =newPerson('kobe',27,'SoftWareEngineer');
    4. console.debug(per2);
    5. console.debug(per1.constructor ==Person);//true
    6. console.debug(Person== per2.constructor);//true
     
     
    对象的构造器属性最初是用来标识对象类型的,而检测对象类型最好还是使用instanceof操作符更靠谱一些,比如per1对象是Person的实例,也是Object的实例.
    创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型.
     
    2.1将构造函数当作函数
        构造函数也是函数,只不过调用的方式不同而已.下面的代码展示了几种不同的调用方式
     
    1. functionPerson(name, age, job){
    2. this.name = name;
    3. this.age = age;
    4. this.job = job;
    5. this.sayName =function(){
    6. console.debug('hi~~ '+this.name);
    7. };
    8. }
    9. //使用构造函数的方式
    10. var person =newPerson("Nicholas",29,"Software Engineer");
    11. person.sayName();//"Nicholas"
    12. //使用普通函数的方式,这个函数被添加为window对象的一个属性
    13. Person("Greg",27,"Doctor");//adds to window
    14. window.sayName();//"Greg"
    15. window.name ='lebron';
    16. window.sayName();//lebron
    17. //将函数绑定在一个对象上,并且设定了其作用域为这个绑定的对象
    18. var obj =newObject();
    19. Person.call(obj,"Kristen",25,"Nurse");
    20. obj.sayName();//"Kristen"
    21. obj.name ='kobe';
    22. obj.sayName();//kobe
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    ​ssss





  • 相关阅读:
    第一周学习总结
    《淘宝网》质量属性分析
    软件架构师如何工作
    MVC模式
    Python学习
    echarts-数据的视觉映射
    热词展示
    热词关系图
    offset、client、scroll三个系列对比,是否有边框 padding?是否有单位?
    元素滚动 scroll系列属性 如果内容溢出盒子、scroll返回的是内容的大小 是否带边框、单位?
  • 原文地址:https://www.cnblogs.com/zhaobing/p/3818912.html
Copyright © 2011-2022 走看看