🍅 作者F1a;阿珊

🍅 作者简介：95后前端小姐姐，蓝桥签约作者，欢迎点赞、收藏、评论

🍅 粉丝专属福利：知识体系、面试题库、技术互助、简历模板。文末公众号领取

🍅 包邮送书（每周1-2次）：关注公众号「信息技术智库」回复「送书」

手头紧、时间紧、衣服紧、眉头紧 ，这就是传说中的前程四紧吧~

 本JS基础笔记系列一共有六篇相关的推文

本篇是第四篇：JS面向过程以及对象

这是笔者很早之前跟着视频学JS记录下来的笔记哦~

希望对你有所启发~

目录

01 编程思想

02 创建对象

03 工厂模式常见对象

04 自定义构造函数创建对象

05 创建对象的图解

06 字面量的方式创建对象

07 JSON格式的数据

08 简单类型和复杂类型

09 内置对象

---

01 编程思想

编程思想：把一些生活中做事的经验融入到程序中

面向过程：凡事都要亲力亲为,每件事的具体过程都要知道,注重的是过程

面向对象：根据需求找对象,所有的事都用对象来做,注重的是结果

面向对象特性：封装、继承、多态 (抽象性)

js不是面向对象的语言，但是可以模拟面向对象的思想

js是一门基于对象的语言：万物皆对象

什么是对象?有特征和行为,具体特指的某一个事物

02 创建对象

1.调用系统的构造函数创建对象

VAR 变量名= new Object();

  //实例化对象  var obj = new Object();  //对象有特征---属性和行为---方法  //添加属性-----如何添加属性?  对象.名字=值;  obj.name = "阿珊";  obj.age = 18;   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();

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();​​​​​​​

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

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

3.字面量的方式创建对象

03 工厂模式常见对象

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

语法: 变量 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("小红",30);per2.sayHi();

 

04 自定义构造函数创建对象

自定义构造函数创建对象，自己定义一个构造函数，自定义构造函数，创建对象

函数和构造函数的区别：名字是不是大写(首字母是大写)

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);//falseconsole.log(dog instanceof Dog);

自定义构造函数创建对象主要做了一下几件事：

• 在内存中开辟(申请一块空闲的空间)空间,存储创建的新的对象

• 把this设置为当前的对象

• 设置对象的属性和方法的值

• 把this这个对象返回

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();

05 创建对象的图解

1 调用构造函数创建对象

 var obj=new Object();

2.自定义构造函数创建对象

function Person(name,age) {  this.name=name;  this.age=age;  this.sayHi=function () {    console.log("您好,我叫:"+this.name);  };}

创建对象----实例化一个对象,并初始化​​​​​​​

var per=new Person("小明",20);per.name="张三";

06 字面量的方式创建对象

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();

字面量创建对象的缺陷: 一次性的对象​​​​​​​

  var obj={    name:"小明",    age:38,    sex:"女"  };  obj.name="小三";  console.log(obj.name);  点语法:   对象.名字=值; 对象.名字=函数;  点,就完事了

注意：

• 代码(变量)只有执行到这个位置的时候,才知道这个变量中到底存储的是什么,如果是对象,就有对象的属性和方法,如果是变量就是变量的作用

• 对象没有什么,只要点了,通过点语法,那么就可以为对象添加属性或者方法

 var obj = {};//空对象 obj.name = "看名字"; obj.age = 10; obj.fly = function () {   console.log("飞吧"); };

设置和获取属性的另一种写法​​​​​​​

function Person(name,age) {  this.name=name;  this.age=age;  this.play=function () {      console.log("喜欢玩游戏");  };}var obj=new Person("卡卡西",20);//obj.name="佐助";
obj["name"]="佐助";console.log(obj["name"]);
obj.play();obj["play"]();
console.log(obj.name);console.log(obj.age);obj.play();

07 JSON格式的数据

对象:有属性和方法,特指的某个事物

对象:一组无序属性的集合的键值对,属性的值可以是任意的类型

function Dog(name) {    this.name=name;  }  function Person(name,age) {    this.age=age;    this.name=name;    this.sex=true;    this.dog={};    this.play=function () {      console.log("喜欢玩游戏");    };  }
  var sex=false;//男  console.log(sex?"男":"女");
 var sex=true;//男 console.log(sex?"男":"女")

JSON格式的数据:一般都是成对的,是键值对

  json也是一个对象,数据都是成对的,一般json格式的数据无论是键还是值都是用双引号括起来​​​​​​​

var obj={  name:"小明"};
var JSON = {  "name": "小明",  "age": "10",  "sex": "男"};

遍历对象,是不能通过for循环遍历,无序 key是一个变量,这个变量中存储的是该对象的所有的属性的名字

  for (var key in json) {      console.log(key + "===========" + json[key]);    }      var key="name";      console.log(json[key]);
 // 可以通过for-in循环      for(var key in json){        //console.log(key);//json对象中的属性的名字        console.log(json[key]);      }  //  对象中确实有这个属性对象.属性名字  或者对象[属性名字]  //一个一个的遍历出来  var arr=[10,20,30];  for(var i=0;i<arr.length;i++){    console.log(arr[i]);  }

08 简单类型和复杂类型

原始数据类型：number,string,boolean,undefined, null,object

基本类型(简单类型)，值类型: number,string,boolean

复杂类型(引用类型)：object

空类型:undefined：null

值类型的值在哪一块空间中存储? 栈中存储

引用类型的值在哪一块空间中存储?对象在堆上存储,地址在栈上存储

var num=10;//值类型,值在栈上var obj={};//复杂类型,对象在堆,地址(引用)在栈

值类型之间传递,传递的是值 引用类型之间传递,传递的是地址(引用)

值类型作为函数的参数,传递的是值 引用类型作为函数的参数,传递的是地址

  var num=10;  var num2=num;//传递的值
  function f1(x) {    x=100;  }  var num=10;  f1(num);  console.log(num);//
  var obj={    name:"小明"  };  function f2(obj2) {    obj2.name="小红";  }  console.log(obj.name);//  f2(obj);  console.log(obj.name);//

09 内置对象

1.内置对象----js系统自带的对象

• Math

• Date

• String

• Array

• Object

//如何验证变量是不是对象 console.log(Array instanceof Object); var obj={}; console.log(obj instanceof Object);

• Math.PI----π---Math.E----常数的底数Math.abs(值)-----绝对值Math.ceil(值)----向上取整Math.floor(值)---向下取整 console.log(Math.PI); console.log(Math.E); console.log(Math.abs(-2)); console.log(Math.ceil(2.77)); console.log(Math.floor(2.77)); console.log(Math.fround(2.77)); console.log(Math.max(2,2,88,5,3,44,777)); console.log(Math.min(2,2,88,5,3,44,777)); console.log(Math.pow(2,4));//16 console.log(Math.sqrt(2,4));//16 console.log(Math.random());//16

2.自定义对象—自己定义的构造函数创建的对象

3.浏览器对象—BOM

添加公众号「信息技术智库」：

🍅 硬核资料：20G，8大类资料，关注即可领取（PPT模板、简历模板、技术资料）🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。🍅 面试题库：由各个技术群小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。🍅 知识体系：含编程语言、算法、大数据生态圈组件（MySQL、Hive、Spark、Flink）、数据仓库、前端等。

👇👇送书抽奖丨技术互助丨粉丝福利👇👇