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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
js动态设置div的值下例子
Oct 29 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
关于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
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python import与from import使用及区别介绍
2018/09/06 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python实现可变变量名方法详解
2019/07/01 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
前处理组长岗位职责
2014/03/01 职场文书
社区党务公开实施方案
2014/03/18 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
退税申请报告怎么写
2015/05/18 职场文书
教务处干事工作总结
2015/08/14 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript