创建对象三种方式:

  1. 调用系统的构造函数创建对象
  2. 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
  3. 字面量的方式创建对象

第一种:调用系统的构造函数创建对象

    //小苏举例子:
//实例化对象
var obj = new Object();
//对象有特征---属性;和 行为---方法
//添加属性-----如何添加属性? 对象.名字=值;
obj.name = "小苏";
obj.age = 38;
obj.sex = "女";
//添加方法----如何添加方法? 对象.名字=函数;
obj.eat = function () {
console.log("我喜欢吃油炸榴莲凉拌臭豆腐和大蒜");
};
obj.play = function () {
console.log("我喜欢玩飞机模型");
};
obj.cook = function () {
console.log("切菜");
console.log("洗菜");
console.log("把菜放进去");
console.log("大火5分钟");
console.log("出锅");
console.log("凉水过一下");
console.log("放料,吃");
};
console.log(obj.name);//获取--输出了
console.log(obj.age);
console.log(obj.sex);
//方法的调用
obj.eat();
obj.play();
obj.cook();

练习1:有一个黄色的小狗,叫大黄,今年已经三岁了,250斤的重量每次走路都很慢,喜欢吃大骨头

    //创建对象
var smallDog = new Object();
smallDog.name = "大黄";
smallDog.age = 3;
smallDog.color = "黄色";
smallDog.weight = "250";
smallDog.eat = function () {
console.log("我要吃大骨头");
};
smallDog.walk = function () {
console.log("走一步摇尾巴");
};
smallDog.eat();//方法的调用
smallDog.walk();

练习2:创建一个手机对象,手机有型号,有颜色,可以打电话和发短信

    var phone = new Object();
phone.size = "iphone8";
phone.color = "黑色";
phone.call = function () {
console.log("打电话");
};
phone.sendMessage = function () {
console.log("你干啥捏,我烧锅炉呢");
}; phone.call();
phone.sendMessage();

如何获取该变量(对象)是不是属于什么类型的?

语法: 变量 instanceof 类型的名字----->布尔类型,true就是这种类型, false不是这种类型

在当前的对象的方法中,可以使用this关键字代表当前的对象

      //人的对象
var person=new Object();
person.name="小白";
person.age=10;
person.sayHi=function () {
//在当前这个对象的方法中是可以访问当前这个对象的属性的值
console.log("您好,吃了没您,我叫:"+this.name);
};
//学生的对象
var stu=new Object();
stu.name="小芳";
stu.age=18;
stu.study=function () {
console.log("学习,敲代码,今天作业四遍,我今年"+this.age+"岁了");
};
//小狗的对象
var dog=new Object();
dog.name="哮天犬";
dog.say=function () {
console.log("汪汪...我是哮天犬");
};
       //输出人是不是人的类型
console.log(person instanceof Object);
console.log(stu instanceof Object);
console.log(dog instanceof Object); //对象不能分辨出到底是属于什么类型?

如何一次性创建多个对象? 把创建对象的代码封装在一个函数中

即:工厂模式创建对象

    //工厂模式创建对象
function createObject(name, age) {
var obj = new Object(); //创建对象
//添加属性
obj.name = name;
obj.age = age;
//添加防范
obj.sayHi = function () {
console.log("大家好,我叫" + this.name + "我今年" + this.age + "岁");
};
return obj;
};
//创建人的对象
var per1 = createObject("小张", 20);
per1.sayHi();
//创建另一个人的对象
var per2 = createObject("小黄", 18);
per2.sayHi();

第二种:自定义构造函数创建对象 (结合第一种和需求通过工厂模式创建对象)

自定义构造函数创建对象:
  1. 自定义构造函数
  2. 创建对象
    //函数和构造函数的区别;名字是不是大写(首字母是大写)
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHi = function () {
console.log("我叫:" + this.name + ",年龄是:" + this.age);
};
}
//自定义构造函数创建对象:先自定义一个构造函数,创建对象
var obj = new Person("小明", 10);
console.log(obj.name);
console.log(obj.age);
obj.sayHi(); var obj2 = new Person("小红", 20);
console.log(obj2.name);
console.log(obj2.age);
obj2.sayHi(); console.log(obj instanceof Person);
console.log(obj2 instanceof Person);

举例再造一个:

    //自定义狗的构造函数,创建对象
function Dog(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var dog = new Dog("大黄", 20, "男");
console.log(dog instanceof Person);//false
console.log(dog instanceof Dog);

自定义构造函数创建对象,做了四件事情:

1. 在内存中开辟(申请一块空闲的空间)空间, 存储创建的新的对象
2. 把this设置为当前的对象
3. 设置对象的属性和方法的值
4. 把this这个对象返回 
 
 

第三种:字面量的方式创建对象

var num=10;

var arr=[];

var obj={};

    var obj = {};
obj.name = "小白";
obj.age = 10;
obj.sayHi = function () {
console.log("我是:" + this.name);
};
obj.sayHi();

优化后:

    var obj2 = {
name: "小明",
age: 20,
sayHi: function () {
console.log("我是:" + this.name);
},
eat: function () {
console.log("吃了");
}
};
obj2.sayHi();
obj2.eat();
 
 

JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式的更多相关文章

  1. Vue.js基础语法(三)

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...

  2. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  3. js获取时间戳的三种方式

      js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...

  4. js声明变量的三种方式

    JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用 正确用法: <script type="text/javascript"> ...

  5. JS基础语法---对象总结

        * 编程思想:     * 面向过程:凡事亲力亲为,所有的事情的过程都要清楚,注重的是过程     * 面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果     *   ...

  6. JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

    第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...

  7. JS基础语法---练习:交换两个变量的值

    * JavaScript简称为JS * JavaScript是什么?     * 是一门脚本语言:不需要编译,直接运行     * 是一门解释性的语言:遇到一样代码就解释一行代码     * C#语言 ...

  8. Golang 基础之基础语法梳理 (三)

    大家好,今天将梳理出的 Go语言基础语法内容,分享给大家. 请多多指教,谢谢. 本次<Go语言基础语法内容>共分为三个章节,本文为第三章节 Golang 基础之基础语法梳理 (一) Gol ...

  9. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

随机推荐

  1. C语言笔记 07_枚举&指针

    emum(枚举) 枚举是 C 语言中的一种基本数据类型,它可以让数据更简洁,更易读. 枚举语法定义格式为: enum 枚举名 {枚举元素1,枚举元素2,--}; 举个例子,比如:一星期有 7 天,如果 ...

  2. JS---案例:简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  3. 关于Xpath

    1.xPath简介 XPath是一门在XML和HTML文档中查找信息的语言,可以用来在XML和HTML文档中对元素和属性进行遍历 XPath的安装 Chrome插件XPath Helper 点Chro ...

  4. nginx和swoole怎么混合使用

    有需要学习交流的友人请加入交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群​jq.qq.com 基于epoll的Nginx 有了epoll,理论上1个进程就可以 ...

  5. SpringMVC通过Redis实现缓存主页

    这里说的缓存只是为了提供一些动态的界面没办法作静态化的界面来减少数据库的访问压力,如果能够做静态化的话的还是采用nginx来做界面的静态化,这样可以承受高并发的访问能力. 好了,废话少说直接看实现代码 ...

  6. delphi使用Chilkat 组件和库从SFTP下载文件

    官网地址:https://www.example-code.com/delphiDll/default.asp 实例代码:(不包括全局解锁)  密码生成器:https://www.cnblogs.co ...

  7. ionic项目打包+部署

    环境: 1.ionic 2.angular-cli  开发 1.CTRL C + CTRL V 2.图片路径的问题 使用‘assets/xxxxx.jpg’,而不使用‘../../assets/xxx ...

  8. CSS学习笔记-过渡模块

    过渡模块:    1.过渡三要素        1.1必须要有属性发生变化        1.2必须告诉系统哪个属性需要执行过渡效果        1.3必须告诉系统过渡效果持续时长    2.格式: ...

  9. ImageView设置rounded corner

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/207 ImageView设置rounded corner ...

  10. JEB 无源码调试 以dvm smali字节码方式,Demo尝试

    关于调试器看不到进程,无法attach的问题,网上也有很多教程,基本是修改ro.debugable =1  ,ro.secure = 0 让adbd有root权限 attach到其他进程,涉及到要修改 ...