Javascript - 学习笔记
JavaScript -学习笔记
概述:
javascript和java没有任何关系,javascript也可以算是面向对象的语言(这个貌似有争论),可以用面向对象的思维开发,是基于对象的语言,没有类的概念,它由原型链模拟实现了面向对象语言中的继承(伪继承机制,实质是修改当前自定义对象或者function对象),对象实现了封装。
闭包:
-- 闭包也是模拟面向对象语言中的封装,上面的对象封装无法阻止直接访问对象中的某个属性,可以业务逻辑要求这个属性必须经过预处理,
-- 利用函数作用域(局部变量对外隐藏),实现属性的对外隐藏,只可以通过返回的对象中的函数(直接返回函数)访问已经预处理的数据,有点类似于javabean,例如实现一个检索功能。
-- 本质上就是一个未被释放的栈内存,正常一个函数调用完成后,栈桢即被释放,但是当局部变量被返回的对象中的function对象使用,这个栈桢无法被正常释放,这个未被释放的栈桢就是类似一个类对象,局部变量就变成了类似这个类对象的成员属性,被返回的function对象就是类似处理这个成员属性的成员方法
--在确定不使用了这个类对象后(栈桢),可以将返回的JSON格式对象或者function对象引用指向null,间接的释放掉栈桢。
--使用闭关实现封装,也是为了写出易读易懂得代码
思维图:
内存模型(对象在堆,函数执行栈桢)》对象》原型链》函数命名方式》函数调用》作用域
内存管理:
-- 生成的对象存储在堆内存(window,document,JSON自定义对象,Fucntion对象)
-- 执行Function对象时,产生一个栈桢,当前执行过程中又执行另一个Function对象时,再产生一个栈桢,多重会产生栈桢递归调用,再从最底层依次返回
-- 栈桢中存放局部变量,形参,计数器,当一个执行过程结束,栈桢内存即被释放
-- 垃圾回收器自动回收无root引用的对象, root可以是对象的属性,方法的局部变量或者形参
详情:
1.对象种类
--javascript 最顶层的对象就是window, window对象包含的其他属性对象如下
window - screen
- history
- location
- navigation
- frames
- document -- 其实就是dom对象用来操作文档内的节点
- 定义对象 -- 1.实例化的自定义JSON格式对象,
2.实例化的内置类对象(Array,Date,Error,Math,Number,Object,String,Function),
3.直接定义的Function对象,就是定义一个命名函数,函数比较特殊所以从内置对象中 单独提出说明下,调用函数对象才会产生栈桢
4.由new Fuction对象创建新的自定义对象
5.由new Object创建新的自定义对象
- 直接定义在文档内的基本数据类型 -- 数值,布尔,字符串,undefined,null
2.Function对象(函数)声明方式
--显式声明方式,在window对象中的声明调用和自定义JSON格式对象中的匿名函数中声明
--匿名声明方式,window对象中声明并赋值给一变量,声明定义自定义JSON格式对象中的匿名函数
3.Function对象显示声明
-- 一种是正常的函数声明调用
-- 另一种是内部使用this,使用new是一种特殊的调用方式会生成一个新对象
4.Function对象补充说明
-- 每一函数其实就是一个function对象
-- 2种定义声明函数对象方式:
a.显式命名--
function functionName(arg){}
i.这种命名函数定义在文档内,其实可以是自定义类属于window
ii.直接定义在文档内的函数对象属于window对象,可以由其他window的成员函数或者自定义对象中函数调用
b.匿名方式
function(arg){}
-- window: 直接定义文档里必须指明引用,var f = function(arg){}
-- JSON对象中的使用匿名函数对象定义
5.实例化对象方式
--显式Function对象
function Class(name, value){
this.member1 = "instance value";//this标识是是实例属性,外部访问每个实例对象有自己的值
class.member2 = "class value";//类名修饰的是类属性,所有实例对象都可以取到相同的值,在外部必须以"类名.member2"方式访问,如果以实例对象.member2会得到undefined
var name = "abc";//var或者无修饰的为局部变量,在外部是无法访问的,只能在成员函数中使用
var age = "18";
var b = function(arg){};
}
--使用显示fuction对象创建新对象
var g = new Class("abc", "18");
var f = new Class();
f.c = "cde";//可以直接添加成员属性
f.d = function(arg){};//可以直接添加成员函数
-- new Object方式创建自定义对象
var myObj = new Object(); myObj.name = "abc";myObj.f=function(){};
-- JSON格式自定义对象
var myObj = {
var name : "abc",
var f : function(arg){}
}
//在某个函数中更常用的方式是 var myObj ={};myObj.attr1 = "abc";
6.对象关系
-- window对象为顶层对象,可以拥有JSON自定义对象,Function对象及由Function对象new的对象
--JSON对象和Function对象和Function对象new的对象,可以互相拥有
7.Function对象(函数)的调用 -- 详细参考《你所不知道的javascript》
-- 隐式调用
-- 显式调用
-- new调用
-- Function对象 就是一普通对象,只有执行时使用(),才会生成栈桢,所以闭包中的局部变量是被Function对象引用着,所以无法释放。
8.函数作用域
-- 从上到下的层级,Object->Function A -> Function -> B ->Fcution C 定义顺序,在调用这些function对象产生栈桢的递归调用,Function A的局部对象向下可见,Function C的局部对象自由它自己可以使用
9.伪继承机制
--javascript没有真正的类继承,实质是对原有Function对象或者由Fuction对象产生新的对象的进行修改
function Class(){
var member1 = "member1";
function1 = function(arg){};
}
var c1 = new Class();
var c2 = new Class();
Class.prototype.function2=function(){}; -- 这是c1和c2对象都拥有了fucntion2对象函数
c1.prototype.fuction3=function(){} -- 只有c1对象拥有fuction3对象函数
10.Dom Element:
function对象也就是函数就是用于window成员函数或者自定义函数,还有页面element的成员属性(如element.onclick = function(){}),这类其实就是dom元素,其定义的成员函数是由浏览器中的事件去触发,而自定义函数的调用时由具体业务逻辑代码相互调用
所有的逻辑执行一定都是在函数中,对象的创建,赋值,计算,判读循环
11.正则表达式
使用方法:/ /中间包含匹配输入及通配符 -- "^" 匹配以输入开始并且以$匹配以输入结束, $/g是进行全局匹配,否则只匹配第一个后结束, \表示转义字符
a.匹配输入,如下
/<a href=/
b.匹配通配符
/^<a href=(\'|\")[a-zA-Z0-9\/:\.]*(\'|\")>.*<\/a>$/
--1.匹配以<a href=开始 2.匹配'或者" 3.匹配大小写字母,数字,/,: ,. ,出现多次 4.匹配'或者" 5.匹配> 6.匹配任意字符出现多次 7.匹配以</a>结束
<a href='http://www.com.website'>跳转</a>
3./^<a href=(\'|\")[a-zA-Z0-9\/:\.]*(\'|\")>.*<\/a>$/.test(str);返回true or false
4.str.replace(/(^\s*))|(\s*$/g, ""), 就是trim处理
12. == 和 ===
4.1. 两个基本数据类型比较
a. ==比较的是将两边转换为同一类型后的比较
b. ===先进行类型比较,再进行值比较
4.2 两个Object类型(包括自定义和内置)比较
a.无区别,都是进行地址比较
4.3 一个基本类型和一个Object类型
a. ==先将高级类型转换为基本类型进行值比较
b. ===类型不同, false
13. null 和undifined --其实是两种基本数据类型,其唯一的值和类型名一样
a.undifined -- 未定义对象属性时 访问未定义属性是undifined
b.null -- 定义了对象属性,其值为null
c.直接判断是否为undifined或者null
if(!arg){}//基于强制类型转换会将undefined or null转换为布尔类型,转换后为false
d.某些浏览器可能不支持undefined值,只需在window下添加一个全局变量即可 var undefined;
14.typeof 和instanceof
6.1. typeof即可以作为一个函数使用,也可用当一个运算符使用
a. typeof(a) 或者 typeof a
b.返回值为 基本数据类型(undefined,null,boolean,number,string),自定义及内置对象(object),函数对象function
6.2 instanceof --判读某个变量是否为指定类的实例,返回ture or false
var a = [4.5];
instanceof Array;
instanceof Object;
所有类的基类都是Object,所以以上都返回true
15.with语句 -- 使用with语句避免书写同一对象
with(document){ document.writeln("a"); document.writeln("a"); document.writeln("a"); }
16.window子窗口与父窗口 --非模态窗口交互
16.1 打开子窗口
a.使用如下方法 --该方法返回子窗口window对象,可以操作子窗口中的成员属性及方法
var subWindow = window.open ('url/index.html','newwindowID','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no'); subWindow.toolUtil.test("abc"); //参数说明: //window.open 弹出新窗口的命令; //'page.html' 弹出窗口的文件名; 除了url其余都是非必填 //'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替; //height=100 窗口高度; //width=400 窗口宽度; //top=0 窗口距离屏幕上方的象素值; //left=0 窗口距离屏幕左侧的象素值; //toolbar=no 是否显示工具栏,yes为显示; //menubar,scrollbars 表示菜单栏和滚动栏。 //Resizable=no 是否允许改变窗口大小,yes为允许; //location=no 是否显示地址栏,yes为允许; //status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
16.2.子窗口中操作父窗口 -- 子窗口中可以使用window.opener属性获取父窗口window,然后可以操作父窗口中的成员属性及方法
a.window.opener.toolUtils.test("abc");
17.window子窗口与父窗口 -- 模态窗口交互
a.调用如下方法打开一个模态窗口
window.showModalDialog(URL, arguments, features)//方法用来创建一个显示HTML内容的模态对话框 //参数说明: //URL -- 必选 字符串 用来指定对话框要显示的网页的URL。 // arguments --可选 用来向对话框传递参数,参数类型不限 ,对话框通过window.dialogArguments来取得传递进来的参数。 //features --可选 字符串 用来描述对话框的外观等信息 //========= //features参数说明 //参数名称 参数属性 说明 //dialogHeight npx 对话框高度,不小于100px //dialogWidth npx 对话框宽度 //dialogLeft npx 离主窗口左的距离 //dialogTop npx 离主窗口上的距离 //center {yes | no | 1 | 0 } 窗口是否居中,默认yes //help {yes | no | 1 | 0 } 是否显示帮助按钮,默认yes //resizable {yes | no | 1 | 0 } 是否可改变大小,默认no //status {yes | no | 1 | 0 } 是否显示状态栏,默认为yes[ Modeless]或no[Modal] //dialogHide { yes | no | 1 | 0 | on | off } 在打印或者打印预览时对话框是否隐藏,默认为no //scroll { yes | no | 1 | 0 | on | off } 指明对话框是否显示滚动条,默认为yes //edge { sunken | raised } 指明对话框的边框样式,默认为raised //unadorned { yes | no | 1 | 0 | on | off } 默认为no