个人博客网:https://wushaopei.github.io/    (你想要这里多有)

一、编程思想

1、定义:

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

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

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

面向对象特性:封装,继承,多态 (抽象性)

  • js不是面向对象的语言,但是可以模拟面向对象的思想
  • js是一门基于对象的语言: 万物皆对象:---------->程序猿 程旭媛

什么是对象?  看的见,摸得到,具体特指的某个东西

2、对象分享有什么特点: 特征和行为

对象 :  有特征和行为,具体特指的某一个事物

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

二、对象及其创建方式

1、创建对象 的三种方式:

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

var 变量名= new Object(); Object 是系统的构造函数 Array

示例:

        //实例化对象
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();

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

(3)字面量的方式创建对象

2、创建对象练习:

①  练习:有一个黄色的小狗,叫大黄,今年已经三岁了,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();

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

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

3、工厂个模式常见对象

语法:

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

4、自定义构造函数创建对象,我要自己定义一个构造函数,自定义构造函数,创建对象

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

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

5、自定义构造函数创建过程中做了几件事?

解析:

1.在内存中开辟(申请一块空闲的空间)空间,存储创建的新的对象
2.把this设置为当前的对象
3.设置对象的属性和方法的值
4.把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();

创建对象的图解:

6、字面量的方式创建对象

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

缺点:字面量创建对象是 一次性的对象.

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

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

8、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?"男":"女");

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]);
}

注意 :

对象中确实有这个属性对象.属性名字  或者对象[属性名字]

普通数值的遍历 可以使用for 循环:

           var arr=[10,20,30];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}

三、数据类型与值传递

1、简单类型和复杂类型

  • 原始数据类型: number,string,boolean,undefined, null,object
  • 基本类型(简单类型),值类型: number,string,boolean

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

空类型:undefined,null

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

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

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

(1)值类型之间传递,传递的是值
引用类型之间传递,传递的是地址(引用) (2)值类型作为函数的参数,传递的是值
引用类型作为函数的参数,传递的是地址

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

2、识别传递的是什么?

基本类型的值在栈上

复杂类型的对象在堆上,地址(引用)在栈上

传递的内容是:

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

示例:

           var num1 = 10;
var num2 = num1;
num1 = 20;
console.log(num1);//20
console.log(num2);//10 var num = 50;
function f1(num) {
num = 60;
console.log(num);//60
}
f1(num);
console.log(num);//50 var num1 = 55;
var num2 = 66;
function f1(num, num1) {
num = 100;
num1 = 100;
num2 = 100;
console.log(num);//100
console.log(num1);//100
console.log(num2);//100
} f1(num1, num2); console.log(num1);//55
console.log(num2);//100
console.log(num);// 报错 function Person(name,age,salary) {
this.name = name;
this.age = age;
this.salary = salary;
} function f1(person) {
person.name = "ls";
person = new Person("aa",18,10);
} var p = new Person("zs",18,1000);
console.log(p.name);
f1(p);
console.log(p.name);

四、内置对象和Math对象

1、内置对象:

js 中有三种对象:

  1. 内置对象----js系统自带的对象
  2. 自定义对象---自己定义的构造函数创建的对象 (自己写的)
  3. 浏览器对象---浏览器的

内置对象:

Math、Date、String、Array、Object

验证变量是不是对象的方式:

           console.log(Array instanceof Object);
var obj={};
console.log(obj instanceof Object);

2、Math对象

实例对象: 通过构造函数创建出来,实例化的对象

静态对象: 不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用,

  • 实例方法必须通过实例对象调用
  • 静态方法必须通过大写的对象调用
        Math.PI----π---
Math.E----常数的底数
Math.abs(值)-----绝对值
Math.ceil(值)----向上取整
Math.floor(值)---向下取整

简单示例:

           console.log(Math.PI);
console.log(Math.E); var mt=new Math(); console.log( Math.abs('-1'));//1 console.log( Math.abs(-2));//2
console.log(Math.abs(null));//---------0 重点
console.log(Math.abs("string"));//NaN console.log(Math.ceil(12.3));//13
console.log(Math.ceil(12.9));//13
console.log(Math.ceil(12.09));//13
console.log(Math.ceil(12.03));//13
console.log(Math.ceil(12.92));//13 console.log(Math.floor(12.3));//12
console.log(Math.floor(12.9));//12
console.log(Math.floor(12.09));//12
console.log(Math.floor(12.03));//12
console.log(Math.floor(12.92));//12 console.log(Math.fround(2));//2
console.log(Math.fround(2.1));//2.0999999046325684
console.log(Math.fround(2.9));//2.9000000953674316 //找一坨数字中的最大值 console.log(Math.max(10,1,9,100,200,45,78));//200
console.log(Math.min(10,1,9,100,200,45,78));//1
console.log(Math.pow(2,4));//16
console.log(Math.sqrt(16));//4 //0-4 没有5
console.log(parseInt(Math.random()*5)+1);//4
console.log(parseInt(Math.random()*100)+1);//89

重点总结:

  Math 是一个对象,但是不是一个函数
Math对象下的属性和方法都是静态 方法:
Math.ceil()---向上取整
Math.floor()---向下取整
Math.Pi----圆周率的值
Math.Max()---一组数字中的最大值
Math.Min()---一组数字中的最小值
Math.abs()----绝对值
Math.random---随机数字
Math.sqrt()----开平方
Math.pow()----一个数字的多少次幂 new 的执行过程:----->new的时候,系统做了什么事?
1. 开辟空间,存储创建的新的对象
2. 把this设置为当前的对象
3. 设置属性和方法的值
4. 返回当前的新的对象

JavaScript (五) js的基本语法 - - - 面向对象、工程模式、内置对象、JSON的更多相关文章

  1. JS基础-语法+流程控制语句+函数+内置对象【数组】

    JS语法: Javascript基本数据类型:undefined/null/Boolean/number/string 复杂数据类型:object typeof用来检测变量的数据类型 typeof的使 ...

  2. javascript:面向对象和常见内置对象及操作

    本文内容: 面向对象 常见内置对象及操作 首发日期:2018-05-11 面向对象: JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型. 对象是 ...

  3. JavaScript高级编程———基本包装类型String和单体内置对象Math

    JavaScript高级编程———基本包装类型和单体内置对象 <script> var stringObject = new String("hello world") ...

  4. js之数据类型(对象类型——单体内置对象——JSON)

    JSON(Java Script Object Notation)使用JavaScript语法,是用于存储和传输数据的格式,通常用于服务端向网页传递数据.JSON格式仅仅是一个文本,文本可以被任何编程 ...

  5. JS中有趣的内置对象-JSON

    前言 在以前的web开发中,我们多数选择纯文本或XML作为我们的提交的数据格式,大多数是XML,少数纯文本.其实从AJAX(Asynchronous JavaScript and XML)的命名我们也 ...

  6. JavaScript常用内置对象(window、document、form对象)

    由于刚开始学习B/S编程,下面对各种脚本语言有一个宏观的简单认识. 脚本语言(JavaScript,Vbscript,JScript等)介于HTML和C,C++,Java,C#等编程语言之间.它的优势 ...

  7. Js基础知识7-JavaScript所有内置对象属性和方法汇总

    对象什么的,程序员可是有很多呢... JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScr ...

  8. JSP基本的语法、3个编译指令、7个动作指令、9个内置对象

    一.jsp概述 JSP是java server page的缩写,其本质是一个简化的servlet,是一种动态网页技术标准.jsp页面是在HTML页面中嵌入java程序段.使用jsp开发的应用程序能够跨 ...

  9. 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象

    一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...

随机推荐

  1. mac下使用xampp中php显示1044/1045/1046(卸载xampp)

    问题描述 在mac下使用xampp,访问http://192.168.64.3/phpmyadmin/可以正常显示php页面,当创建数据库时提示1044也就是普通用户没有权限 问题猜测 猜测在使用xa ...

  2. 汽车安全攻击篇:智能网联系统的短板,如何防护汽车的安全C

    我们在<速度与激情>里,经常可以看到主角们利用网络侵入汽车网络系统,然后任意的操纵这些车辆,看电影的时候会被画面所震撼到,这两年"自动驾驶"随着特斯拉的车已经越来越普及 ...

  3. 关于tablayout+viewpager+fragment配合使用的一点记录

    最近在写项目的时候遇到要求使用tablayout和fragment,遇到了这里记录一下大致思路. tablayout是头部可以左右切换的头部控制栏控件,配合viewpager使用,fragment是碎 ...

  4. linux下在用python向文件写入数据时'\n'不起作用

    网上翻看一圈,大家都说利用write写数据换行,在linux下用'\n',windows下利用'\r\n',可是尝试了一下,'\n'在windows底下可换行,在linux底下居然不起作用,最后利用' ...

  5. 一文教你快速搞懂速度曲线规划之S形曲线(超详细+图文+推导+附件代码)

    本文介绍了运动控制终的S曲线,通过matlab和C语言实现并进行仿真:本文篇幅较长,请自备茶水: 请帮忙点个赞

  6. 房价预测Task1

    pandas:简单的房价预测实例 我们使用pandas等工具,对于给出的.csv文件进行处理,完成要求的几个Task. 利用sklearn的线性回归,对于房价进行简单的预测. 所有的要求,数据集等文件 ...

  7. SQL 选择列 IF表达式,Contains表达式的用法

    因为业务需要需要使用到, 列中的字段或根据列值是否满足某一条件,进行输出.比如类似与  select if()  ……from……:(但是SQL Server 没有 if 表达式) 比如,如果Scor ...

  8. Linux,Unix,GNU 到底有什么样的渊源?

    Linux,Unix, GNU,你可能经常听到这些名字被放在一起,比如 “Linux是类Unix系统”, “Linux其实应该叫 GNU/Linux” 等等.为什么会有这些说法,这些名词的历史渊源和背 ...

  9. 1005 Spell It Right (20分)

    1005 Spell It Right (20分) 题目: Given a non-negative integer N, your task is to compute the sum of all ...

  10. 到手的DEM不会用?教你6个常用强大功能

    一.概述 DEM是数字高程模型(Digital Elevation Model)的简称,接触GIS,规划,设计类的多多少少会接触到DEM,可是这个直接查看黑溜溜一片DEM到底可以用来做什么呢? 二.背 ...