javascript如何创建对象


Posted in Javascript onAugust 29, 2016

JS是基于对象的语言,可以使用面向对象思想模拟JAVA|C++之类的面向对象语言。
 •面向过程
◦关注解决问题的步骤

 •面向对象
◦关注的是解决问题的所需要的对象(内容和角色),然后根据业务逻辑按一定规则调用相关方法

对象分为系统对象和自定义对象两种。我们可以通过调用系统构造函数来创建出系统对象,如:array|date等。自定义对象必须自己创造,无法利用系统函数来创造。

javascript创建对象 

一、直接创建

//直接创建
     //JS创建对象
     //1:创建空对象
         var person1 = new Object();
     //2:将该对象所需要的属性、方法加进去
         person1.name ="ailer" ;
         console .log(person1.name);
         person1.gender = "male";
     //3:该对象添加的方法|(函数)
         person1. manager= function (){
           console .log("Ailer is my English name" );
        }
     //4:调用对象方法:对象.方法名();
         person1.manager();

     //函数|方法?函数属于对象时,该函数属于这个对象下的方法;通过方法名来调用该函数;
     //变量|属性 ?当变量属于某一个对象时候, 该变量就是这个对象下的方法。通过属性名来调用变量。

      //增
         person1.age ="6" ;
      //改
         person1.name ="lemon" ;
      //查
         console .log(person1.name);
     //删
         delete person1.age;
         console .log(person1.age);==> undefined

      //引用类型,存储的是地址
      //基本类型:存储的是值 标志位

     /*  var arr1 = [1,2,3,4]
        var arr2 = [5, 6, 7,9];
        var arr2 = arr1;//
        arr2[0]=10;//更改arr2里面的值,arr1也更改
        alert(arr1[0]);//====>10 引用类型*/

        var per2 = new Object();
        per2.name = "Relia";
        per2.age = "18";
        per2.gender = "femal";
        per2.hobby = "lemons";

         //1:通过.(点语法)访问属性
         //2:通过[](方括号)访问对象的属性;方括号中必须是属性字符串或保存属性字符串的变量|遍历属性的时候才使用方括号
         var n = "name"
         //console.log(per2["name"]);//双引号

         console .log(per2[n]);
         for ( var property in per2) {
//          console.log(per2[property]);
         }

虽然直观,但是创建多个对象的时候,代码冗余

二、使用函数创建(工厂模式)

为了解决多个类似对象声明的问题,我们可以使用一种叫做工厂模式的方法,这种方法就是为了解决实例化对象产生大量重复的问题。

//定义构造函数      
 function createPerson ( name, age) {
//创建一个新的空对象
           var person = new Object;
//添加属性|方法
           person.name = name;
           person.age = age;
           person. manager = function() {
              console .log("ai" );
           }
//返回
           return person;
        }

         var per1 = createPerson( "ailer", 12 );
         console .log(per1.name);

        var per2 = createPerson( "lemon", 23 );
        console .log(per2.age);
        console.log(per2 instanceof Object);//true
        console.log(per2 instanceof createPerson);//false//无法区分该对象类型
        console.log(per2.manager==per1.manager);//false 可得出per1和per2各自开闭空间

优:批量创建同类实例
缺:实例用同类属性, 造成内存浪费无法公,且无法区分该对象的类型

三、 字面量创建

优:简单直接
缺:无法批量构建同类对象

//字面量创建的对象使用constructor属性不会指向实例,而是指向object
 //使用字面量创建
       var per1 = {
        name:"Ailer",
         constructor:per1,
        age:12,
        gender:"female",
        hobby:"play",
        eat:function(){
          console.log(this.name);
        }
       }
       per1.eat();//ailer
       per1.name="lemon";
       per1.eat();//lemon
       console.log(typeof per1);//Object
       console.log(per1.constructor==Object);//true

 四、new+构造函数

//构造函数创建对象,其子对象用instanceof不识别,所有采用new+obj创建
        //对象识别了,但是仍然浪费一些代码区;==>产生原型创建
        //创建js对象 new+构造函数
        //1:创建构造函数 |通常首字母大写
        function CreatePerson( name , age){
          //2:把对象的属性|方法挂靠在this指针身上, 当调用该函数创建对象时,this指针就指向这个新对象;
          //这个this就添加给这个对象
          this.name = name;
          this.age = age;
          /*this.speak = function(){
            //此处this也指向创建对象
            console.log(this.name+" hello");
          }
        }

      /* CreatePerson.prototype.gender = "20";
       CreatePerson.prototype. ea = function(){
          console .log(this.name+ "sfd" );
       }*/

//      __proto__:是:实例对象中的原型属性, 指向对应构造函数对应的原型对象
//      [[prototype]]
        //调用
        var per1 = new CreatePerson( "ailer", "20" );
        var per2 = new CreatePerson( "relia", "18" );
        console .log(per1 instanceof CreatePerson); //==true
        console .log(per2 instanceof CreatePerson); //==>true
        console .log(per1.speak== per2.speak); //==false说明系统开辟了两个不同的代码区,造成了内存浪费.

字面量创建一个比较方便,所以产生构造函数,普通构造函数(工厂模式),子对象instanceof不识别且内存浪费,用new+构造函数,子对象识别了,但仍有部分代码重复,内存浪费,产生原型代码解决。

五、原型模式

function CreateAnimal(name, age) {
        //1.2:把外部参数绑定实例属性
        this.name = name;
        this.age = age;
      }
      //1.3把相同的属性,绑定在原型上(原型属性,原型方法)
      CreateAnimal.prototype.gender = "male";
      CreateAnimal.prototype.style = function() {
        console.log(this.name + " ailers");
      };
      //2:调用构造函数创建对象
      var cat1 = new CreateAnimal("xiaohua", "2");
      var cat2 = new CreateAnimal("xiaohua", "2");
      cat1.style();

      console.log(cat1.style==cat2.style);//方法引用地址一样,将属性放到原型对象中,节约地址

      //instanceof可以来判断对象属于哪一个【函数】
      //constructor 建造者 也可以用来判断对象属于哪个【构造函数】 【常】 
      //实例对象保存一个 constructor属性指向它的构造函数
      //instanceof and constructor 区别
      console.log(cat1 instanceof CreateAnimal);//true
      console.log(cat1 instanceof Object);//true

      console.log(cat1.constructor == CreateAnimal);//true
      console.log(cat1.constructor == Object); //==false

      //构造函数的原型也有constructor属性指会构造函数
      console.log(CreateAnimal.prototype.constructor == CreateAnimal);//true

      //in判断该属性是否存在这个对象中,这个属性为实例属性或原型 
//           alert("name" in cat1)//true
//           alert("gender" in cat1);//true

      //hasOwnProperty:来判断某一个属性到底是实例属性,还是继承自原型属性 if 是 为true, else不存在|不是返回false;
      console.log(cat1.hasOwnProperty("aaa"));//false 不存在的属性返回为false
      console.log(cat1.hasOwnProperty("name"));//true 实例属性
      console.log(cat1.hasOwnProperty("style"));//false 原型属性返回为false

      //遍历属性找原型属性

      //判断参数是否为原型属性  工具类
      console.log(isPrototype("gender", cat1));//true
      function isPrototype(proString, obj) {
        if(proString in obj) {
          if(!obj.hasOwnProperty(proString)) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      /*
function isProperty(object, property) {//判断原型中是否存在属性
 return !object.hasOwnProperty(property) && (property in object);
}*/

动态原型模式

//构造函数中初始化原型
function per(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        //只在初始化原型的时候执行一次
        if(typeof this.sayName != "function") {
          Person.prototype.sayName = function() {
            alert(this.name);
          }
        }
      }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 #Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 #Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 #Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 #Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 #Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 #Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 #Javascript
You might like
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
详解Python中的文件操作
2021/01/14 Python
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
C#笔试题
2015/07/14 面试题
日期和时间问题
2015/01/04 面试题
应届生服务员求职信
2013/10/31 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
环保倡议书格式范文
2014/05/14 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
以下牛机,你有几个
2022/04/05 无线电
基于Redission的分布式锁实战
2022/08/14 Redis