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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
详解JavaScript 作用域
Jul 14 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
关于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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
sklearn的predict_proba使用说明
2020/06/28 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
全球度假村:Club Med
2017/11/27 全球购物
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
竞选班长演讲稿
2013/12/30 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
体育教学随笔感言
2014/02/24 职场文书
影视后期实训报告
2014/11/05 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
陕西导游词
2015/02/04 职场文书
学生检讨书范文
2019/06/24 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android
python之基数排序的实现
2021/07/26 Python
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS