为了账号安全,请及时绑定邮箱和手机立即绑定

javascript基础篇小结

标签:
JavaScript

转载请声明出处 博客原文

imooc解析有点不好看,建议点击进入简书阅读

随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧

第一课时 入门基础


知识点


  • 操作系统就是个应用程序
  • 只要是应用程序都要占用物理内存
  • 浏览器本身也是一个应用程序
  • 浏览器本身只懂得解析HTML
  • 调用浏览器这个应用程序的一个功能绘制

1、javascript介绍


  • JavaScript操作DOM的本质是=获取+触发+改变

  • 目的:就是用来操作内存中的DOM节点
    • 修改DOM节点的属性
    • javascript语法组织逻辑代码操作DOM
    • BOM(window)它包含了DOM
    • DOM(document)
    • script脚本推荐放在最下边好处:防止因网络问题,页面加载时间长,出现空白;即便网络问题,浏览器也把DOM加载渲染完成,等待从服务端下载完js脚本,出现效果
    • css不放在最下面原因是:好比先穿好衣服在出去,浏览器先把css样式准备好,在加载结构层,使得页面有样子;如果放在下面,因为页面是从上往下加载,没有css,就剩下裸露的标签,很难看,使得用户体验不好

2、基于对象的内存管理


  • javascript就是来操作这些对象
    • 通过逻辑组织对象之间的关系和行为
    • 如何操作这些对象?通过变量引用

3、变量


  • 变量本质是一个空盒子,里面记录了一个内存地址,使能找到内存中的对象,保存了指向具体的实在的东西的地址
  • 变量存在栈中,对象存在堆中
  • 变量的意义:方便我们去操作对象
  • 变量的几种引用方式
    • 指针(C语言中叫法)
    • 引用(Java
    • 变量
  • 例如:

    • var b = document.body 含义:把body这个对象在内存中的地址放到b变量里面,变量bb是内存地址的别名)本身也存在内存中,以后的操作是针对body这个地址
  • 变量命名规范
    • 由字母(a-zA-Z)数字(0-9)下划线(_)以及美元符号($)
    • 不能由数字开头
    • 命名尽量用英文并且具有一定的含义
    • 如果有多个英文单词,后面单词的首字母大写
    • 不能使用关键字
    • 首字母不要大写,大写是有特殊含义的

DOM在内存中的一些图示


DOM解析树

DOM内存图

DOM内存图

DOM内存图

第二课时


回顾上节:

  • 1、javascript介绍

  • 2、基于对象的内存管理

  • javascript就是来操作这些对象
    • 通过逻辑组织对象之间的关系和行为
    • 如何操作这些对象?通过变量引用
  • 3、变量

知识点


1、window作用域


  • 只要在script标签中定义的变量,默认就在window的作用域之下
  • 默认就是window这个对象里面写代码

2、数据类型


如何判断js中的数据类型:

  • typeofinstanceofconstructorprototype方法比较

  • 如何判断js中的类型呢,先举几个例子:
var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
最常见的判断方法typeof

alert(typeof a)   ------------> string
alert(typeof b)   ------------> number
alert(typeof c)   ------------> object
alert(typeof d)   ------------> object
alert(typeof e)   ------------> function
alert(typeof f)   ------------> function
  • 其中typeof返回的类型都是字符串形式,需注意,例如:
alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false
  • 另外typeof可以判断function的类型;在判断除Object类型的对象时比较方便。
判断已知对象类型的方法instanceof

alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
  • 注意instanceof后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。
根据对象的constructor判断constructor

alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
  • 注意constructor 在类继承时会出错

  • 例子:
      function A(){};
      function B(){};
      A.prototype = new B(); //A继承自B
      var aObj = new A();
      alert(aobj.constructor === B) -----------> true;
      alert(aobj.constructor === A) -----------> false;
  • instanceof方法不会出现该问题,对象直接继承和间接继承的都会报true
      alert(aobj instanceof B) ----------------> true;
      alert(aobj instanceof B) ----------------> true;
  • 言归正传,解决construtor的问题通常是让对象的constructor手动指向自己:
      aobj.constructor = A; //将自己的类赋值给对象的constructor属性
      alert(aobj.constructor === A) -----------> true;
      alert(aobj.constructor === B) -----------> false; //基类不会报true了;
通用但很繁琐的方法prototype

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;
  • 大小写不能写错,比较麻烦,但胜在通用。
  • 通常情况下用typeof判断就可以了,遇到预知Object类型的情况可以选用instanceofconstructor方法

Javascript的数据类型有六种(ES6新增了第七种Symbol


  • 数值(number):整数和小数(比如1和3.14)
  • 字符串(string):字符组成的文本(比如"Hello World")
  • 布尔值(boolean):true(真)和false(假)两个特定值
  • undefined:表示 未定义 或不存在,即此处目前没有任何值
  • null:表示空缺,即此处应该有一个值,但目前为空
  • 对象(object):各种值组成的集合
  • 通常,我们将数值、字符串、布尔值称为原始类型(primitive type)的值,即它们是最基本的数据类型,不能再细分了。而将对象称为合成类型(complex type)的值,因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。至于undefinednull,一般将它们看成两个特殊值

内存中一共分为几种对象:


  • 变量
  • DOM对象
  • 常量
  • 自定义对象

数据类型转换


转换函数

  • toString() 转换为字符串,在JavaScript中所有数据类型都可以转换为string类型
        var n1 = 12;
        var n2 = true;
        var a = [1, 2, 3];
        var o = {};
        function f(){}
        n1.toString(); //"12"
        n2.toString(); //"true"
        a.toString(); //"1,2,3"
        o.toString(); //"[object Object]"
        f.toString(); //"function f(){}"
  • parseInt()解析出一个string或者number类型的整数部分,如果没有可以转换的部分,则返回NaNnot a number
        var n1 = "12";
        var n2 = "23hello";
        var n3 = "hello";
        parseInt(n1); //12
        parseInt(n2); //23
        parseInt(n3); //NaN
  • parseFloat()解析出一个string的浮点数部分,如果没有可以转换的部分,则返回NaNnot a number
        var n1 = "1.2.3";
        var n2 = "1.2hello"
        var n3 = "hello"
        parseFloat(n1); //1.2
        parseFloat(n2); //1.2
        parseFloat(n3); //NaN 
强制类型转换

  • Boolean(value)- 把给定的值转换成Boolean
        Boolean(123); //true
        Boolean(""); //false
        Boolean([]); //true
        Boolean({}); //true
        Boolean(null); //false
        Boolean(undefined); //false
  • Number(value)-把给定的值转换成数字(可以是整数或浮点数)
        Number("123"); //123
        Number("123h"); //NaN
        Number(true); //1
        Number(false); //0
        Number(undefined); //NaN
        Number(null); //0
        Number([]); //0
        Number({}); //NaN
  • String(value)- 把给定的值转换成字符串
        String(123); //"123"
        String([1,2]); //"1,2"
        String(undefined) //"undefined"
        String(null) //"null"
        String({}) //"[object Object]"
隐式转换

  • 数字+字符串:数字转换为字符串 console.log(12+"12"); //1212
  • 数字+布尔值:true转换为1false转换为0 console.log(12+true); //13
  • 字符串+布尔值:布尔值转换为true或false console.log("hello"+true); //hellotrue
  • 布尔值+布尔值 console.log(true+true); //2
null和undefined

  • undefined 表示一种未知状态,声明了但没有初始化的变量,变量的值时一个未知状态。访问不存在的属性或对象window.xxx)方法没有明确返回值时,返回值是一个undefined.当对未声明的变量应用typeof运算符时,显示为undefined
  • null表示尚未存在的对象,null是一个有特殊意义的值。可以为变量赋值为null,此时变量的值为“已知状态”(不是undefined),即null。(用来初始化变量,清除变量内容,释放内存)
 undefined==null   //结果为true,但含义不同。
 undefined===null //false,两者类型不一致,前者为“undefined”,后者为“object”

3、javascript脚本执行顺序


  • 第一步定义: 分为var定义 和函数定义function
  • 第二步执行: 其他所有
  • 先从上往下定义完所有的后,再从上往下执行 除了var function定义外的 其他都是执行 如:赋值 函数调用
  • 在栈里面找到的,就不去堆里面找,因为栈空间小,就近原则【总之:先在栈里面找,找不到再去堆里面找】在栈里面开辟,就能找到堆里面的地址 如:var b = function(){}

总结一下==运算的规则:(隐式转换)


  • JS中的值有两种类型:原始类型(Primitive)、对象类型(Object)。

  • 原始类型包括:UndefinedNullBooleanNumberString等五种。

  • Undefined类型和Null类型的都只有一个值,即undefinednullBoolean类型有两个值:truefalseNumber类型的值有很多很多;String类型的值理论上有无数个。

  • 所有对象都有valueOf()toString()方法,它们继承自Object,当然也可能被子类重写

  • undefined == null,结果是true。且它俩与所有其他值比较的结果都是false

  • String == Boolean,需要两个操作数同时转为Number

  • String/Boolean == Number,需要String/Boolean转为Number

  • Object == Primitive,需要Object转为Primitive(具体通过valueOftoString方法)

第三课时


上节回顾:

  • 1、window作用域

    • 只要在script标签中定义的变量,默认就在window的作用域之下
    • 默认就是window这个对象里面写代码
  • 2、数据类型

    • number:数字
    • string:字符类型,必须用引号引起来
    • boolean:布尔类型 true false
    • null:变量引用了一块堆中一个空的空间
    • object:引用对象类型(存在于堆里面)
    • array:数组类型
    • function:函数数据类型
  • 对象数据类型: object,array,function

  • 3、javascript脚本执行顺序
    • 定义 var function
    • 执行 其他所有

知识点:


1、运算符


  • 算术运算符(+,-,*,/,%,++,--)

    • 如果引用所指的地方是null的话,那么在运算中就会自动变成0
    • %运算符 如:4%5取模 模是4 7%5取模 模是7-5=2
  • 字符串和数字相加的情况:

    • 左右都是数字:数字相加
    • 左右有一个字符串:字符串拼接
    • 左右边有一个null:null看做0
    • 左右边有一个undefined:结果是NANnot is number
  • 赋值运算符(=,-=,+=,*=,/=,%=)

  • 比较运算符(==,===,!=,>,<,>=,<=)

    • 先执行表达式计算再赋值
    • ==!=在比较之前首先让双方的值做隐士类型转换,===不转换
  • 逻辑运算符(`,&&,!`)
    • 在js中和PHP中是不一样的 js中返回逻辑或的左边或右边的一个结果 PHP返回或出来以后的结果即:true false
    • 特殊性(注意)---一定要记住(这个特性和其他编程语言不一样):在js里返回不是布尔值
    • `` 短路运算 第一个条件为真 后面不执行
    • &&把表达式最后一个值返回(注意这里)
条件运符(表达式1?表达式2:表达式3)三元运算符

  • 表达式1?表达式2:表达式3 表达式1为真 返回表达式2 否则返回表达式3
  • 三元运算符 可以多层次嵌套使用

2、在js中 有四种被认为是


  • undefined
  • null
  • false
  • 0
  • 例子:var age = prompt("温馨提示:","请输入您的年龄")0
  • 当点击取消的时候,如果出现undefined null fasle 0 表示非的逻辑 那么`就会过滤,取右边的值0`

第四课时


上节回顾:


  • 1、运算符

    • 算术运算符(+,-,*,/,%,++,--)
    • 如果+号左边和右边有一边是字符串类型的数据的话,这个时候就变成字符串拼接
    • var str = "你好"+123;//你好123
    • var count = 2;
    • var str1 = "你叫了我第"-count+"次";//你叫了我第2次
    • 如果引用所指的地方是null的话,那么在运算中就会自动变成0
  • 2、赋值运算符*(=,-=,+=,`=,/=,%=`)

  • 3、 比较运算符(==,===,!=,>,<,>=,<=)
    • 先执行表达式计算再赋值
    • ==!=在比较之前首先让双方的值做隐士类型转换,===不转换
  • 4、逻辑运算符(,&&,!)
  • 5、条件运算符(1>2?3:4)

知识点:


1、console.log调试程序

  • 开发中大量使用这个 而不用alert
2、条件结构

  • if
  • if...else
  • if...else if...else
  • 当通过判断返回某个值的时候,优先使用三元表达式
  • 当通过判断执行N段逻辑代码的时候,只能用条件结构

第五课时


上节回顾:


  • 1、console.log调试程序
  • 2、条件结构
    if
    if...else
    if...else if...else
    • 当通过判断返回某个值的时候,优先使用三元表达式
    • 当通过判断执行N段逻辑代码的时候,只能用条件结构

知识点:


1、switch

  • switch case break default 条件 判断 退出 默认

    • a.只要匹配上一个case,那么它下面的所有的case都会执行包括default
    • b.break的意思跳出当前结构
2、for

  • 循环有三个要素
    • a.循环变量
    • b.判断(循环体)
    • c.改变循环变量
    • d.continue的意思结束本次循环进入下次循环
  • continue 结束本次循环,继续下一次循环 当前这次循环不做 直接做下面的
  • break 结束后面的循环不做了

第六课时


上节回顾:


1、switch

  • switch case break default 条件 判断 退出 默认
    • a.只要匹配上一个case,那么它下面的所有的case都会执行包括default
    • b.break的意思跳出当前结构

2、for

  • 循环有三个要素
    • a.循环变量
    • b.判断条件(循环体)
    • c.改变循环变量
    • d.continue的意思结束本次循环进入下次循环

知识点:


1、while/do...while 没有谁好谁坏 只有适应场景不同


  • 比如:先吃饭 在买单 do..while 用户体验高 有风险 扫雷游戏也是先体验 在问是否退出 提高体验
  • 比如:先买单 在吃饭 while 用户体验不高
  • 一般情况下面,如果条件判断是数字的比较==<>for循环优先.
  • 如果是非数值相关的比较循环,while优先

2、代码内存解析


闭包

  • a.程序永远是先定义后执行
  • b.执行永远从上到下
  • c.函数定义的话在堆(只是一个地址而已)
  • d.函数调用的时候,就会有自己的堆和栈(闭包
闭包 作用域

  • 记住:先定义var function 在从上往下执行
  • 定义定义在自己的栈里面 执行在自己的堆里面
  • 运行在运行的环境中
  • 函数每调用前 只是一个地址
  • 只要调用一次函数就会动态开辟一块内存 创建一个封闭的空间 在自己的封闭的空间的栈中定义var在执行
  • 函数执行完 里面的东西全部销毁
//alert(x);//9:执行弹出x,结果x没定义,错误.
alert(i);//9:执行弹出i,然而i之前已经定义,只不过没地址,因此是undefiend
var i = 10;//1:var i;    10:把常量池中10的地址赋给栈中的i
var j = "你好";//2:var j;   11:把常量池中 你好 的地址复给栈中的j
var k = z = null;//3:var k,z;  12:把堆中null的地址赋值给z和k
var m = function(){//4:var m;   5:function匿名函数  13:把匿名函数在堆中的地址赋给栈中的m
    alert(2);
}
var b = document.body;//6:var b;    14:把堆中document.body对象的地址赋给栈中的b
var f = true;//7:var f; 15:把常量池中true的地址赋给栈中的变量f
function m(){//8:function m;
    alert(1);
}
function m(){
    c = 50;//在局部变量中找不到定义的c 沿着作用域链找到了全局变量的c
    alert('哈哈哈');
    //var c;
}

var c = 150; // 函数m()还未执行到 还没被销毁 此时全局c的值c=50
m();
var c = 20;//到这里一步 m()已经执行完了 函数已经销毁了  这里的c还是20
alert(c);//20
function m(){
    c = 50;//在局部变量中找不到定义的c 沿着作用域链找到了全局变量的c
    alert('哈哈哈');
    function inner(){
        c = 30;
        alert('嘻嘻');
    }
    inner();//c在函数内部找不到定义 所以沿着作用域链找到了全局的c
}

var c = 20;//到这里一步 m()还没执行 函数没被销毁  这里的c是30
m();

alert(c);//30

4、object对象


5、面向对象的程序设计


  • a.function构造器
  • b.prototype原型
  • c.foreach
  • c.作用域
  • d.继承

一些内存图示


闭包示例1

闭包示例2

闭包1

闭包2

闭包3


原型链的几张图解


原型链图解

js原型链演示00-new

js原型链演示01-函数Foo声明

js原型链演示-对象继承模式-01-浅拷贝

js原型链演示02-new

js原型链演示02-1-new

js原型链演示03-Foo.prototype

js原型链演示-对象继承模式-03-基于对象的原型继承

js原型链演示05-继承函数示例

js原型链演示06-继承prototype模式

js原型链演示07-继承prototype模式改进

js原型链演示08-继承prototype直接继承

js原型链演示08-继承prototype空对象中介

js原型链演示09-继承prototype空对象中介封装expend

js原型链演示10-构造器拷贝继承

第七课时


上节回顾:


  • 1.switch
  • 2.while/do...while

    • 一般情况下面,如果条件判断是数字的比较==<>for循环优先.
    • 如果是非数值相关的比较循环,while优先
  • 3.function函数
  • 4.代码内存解析
    • 闭包
      • a.程序永远是先定义后执行
      • b.执行永远从上之下
      • c.函数定义的话在堆(只是一个地址而已)
      • d.函数调用的时候,就会有自己的堆和栈(闭包)

知识点:


1、object对象


  • new关键字代表的是新开辟一块内存空间
  • 没有被引用的内存空间,会在适当的时候被销毁

    • 两句代码含义等同

      • var person = new Object();
      • var person = {};
  • 访问对象的属性除了用 对象引用.属性 key以外,还可以使用对象引用[属性key]

2、面向对象的程序设计


  • function构造器

    • 共同点:
    • 动态创建一块内存空间,闭包
    • 不同点:
    • 函数调用是没有办法拿到空间的地址的,而且这块地址是一块临时地址,执行完函数之后,就会销毁
    • new开辟内存空间,把这块空间的地址返回,这块空间就有可能长期的被引用
  • prototype原型
    • 通过原型使通过同样一个构造器所new(创建)出来的对象具有相同的属性和行为
    • prototype本质就是一个对象
  • foreach
  • this 指代当前创建的这块内存 this.name=name 指代当前内存中的这个name属性 接收外界传过来的值
  • 继承

其他:


  • 函数调用后一定有返回值,没有返回值就是undefined

一些内存图示


第八课时


上节回顾:


1.object对象


  • new关键字代表的是新开辟一块内存空间
  • 没有被引用的内存空间,会在适当的时候被销毁
    • 两句代码含义等同
    • var person = new Object();
    • var person = {};
    • 访问对象的属性除了用 对象引用属性key以外,还可以使用对象引用[属性key]

2.面向对象的程序设计


  • a.function构造器
    • 共同点:
      • 动态创建一块内存空间,闭包
    • 不同点:
      • 函数调用是没有办法拿到空间的地址的,而且这块地址是一块临时地址,执行完函数之后,就会销毁
      • new开辟内存空间,把这块空间的地址返回,这块空间就有可能长期的被引用
  • b.prototype原型
    • 通过原型使通过同样一个构造器所new(创建)出来的对象具有相同的属性和行为
    • prototype本质就是一个对象
  • c.foreach
  • c.this
  • d.继承

知识点:


1.prototype内存解析


  • prototype是原型,是一块所有对应构造器创建的对象都共享的内存空间
  • 在面向对象设计程序的时候,属性应该是对应的空间的,而功能应该是prototype公共空间的

2.通过prototype扩展功能


  • 所有的构造器都是继承于Object构造器的,因此只要Object的原型里有的功能,所有的对象都有
//多个对象的构造 以及 多个对象之间如何建立联系
function Student(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;

}
function Bingqilin(name){
    this.name = name;
}
function Game(name){
    this.name = name;
}
function Hour(time){
    this.time = time;
}
Student.prototype = {

    eat:function(b){
        alert(this.name+"喜欢吃"+b.name);
    },
    mess:function(){
        alert(this.name+"的信息:"+this.age+','+this.sex);
    },
    sleep:function(h){
        alert(this.name+"每天睡,"+h.time+'小时');
    },
    work:function(h){
        alert(this.name+"每天工作,"+h.time+'小时');
    },
    like:function(g){
        alert(this.name+"喜欢打,"+g.name);
    }

}
var s = new Student("小明",22,"男");

var b = new Bingqilin("黑色的冰淇淋");
s.eat(b);//小明喜欢吃黑色的冰淇淋

var g = new Game("英雄联盟");
s.like(g);//把对象的地址发送给like的参数即可访问构造函数Game的name属性

var h = new Hour(10);
s.sleep(h);
s.work(h);

一些内存图示


第九课时


回顾:


1、prototype内存解析

  • prototype是原型,是一块所有对应构造器创建的对象都共享的内存空间
  • 在面向对象设计程序的时候,属性应该是对应的空间的,而功能应该是prototype公共空间的
2、通过prototype扩展功能

  • 所有的构造器都是继承于Object构造器的,因此只要Object的原型里有的功能,所有的对象都有
  • 构造器在定义的时候 就默认创建了一个空的原型
3、封装

  • 1:找对象 小头爸爸 大头儿子 饭
  • 2:抽象(类,构造器)
  • 3:创建对象并且建立关系(操作对象)

知识点:


  • 1.继承
  • 2.面向对象程序设计案例(猜拳)

一些内存图示


============字数超过限制,要看完整篇,点这里========

点击查看更多内容
24人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
15
获赞与收藏
246

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消