MarkDown使用手册
-
加粗： Ctrl/Cmd + B
-
标题： Ctrl/Cmd + H
-
插入链接： Ctrl/Cmd + K
-
插入代码： Ctrl/Cmd + Shift + C
-
行内代码： Ctrl/Cmd + Shift + K
-
插入图片： Ctrl/Cmd + Shift + I
-
无序列表： Ctrl/Cmd + Shift + L
-
撤销： Ctrl/Cmd + Z
HTML笔记
CSS笔记
JavaScript笔记
* 1.事件对象
`{
var event = event || window.event
}`
* 2.封装兼容性取消冒泡方法
`{
function stopBubble(event){
var event = event || window.event
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue = false
}
}
}`
* 3.拖拽方法
`{
function drag(elem){
var disX;
disY;
elem.addEventListener("mousedown",function(e){
var event = e || window.event;
disX = event.clientX - parseInt(getStyle(elem,"left"))
disY = event.clientY - parseInt(getStyle(elem,"top"))
document.addEventListener("mousemove",mouseMove,false)
document.addEventListener("mouseup",mouseUp,false)
stopBubble(event)
cancelHndler(event)
},false)
function mouseMove(e){
var event = e || window.event;
elem.style.left = event.clientX - disX + "px"
elem.style.top = event.clientY - disY + "px"
}
function mouseUp(e){
var event = || window.event
document.removeEventListener("moussemove",mouseMove,false)
document.removeEventListener("mouseup",mouseUp,false)
}
}
}
`
* 4. javascript数据类型
基本类型：
1.Number
2.String
3.undefined
4.Boolean
5.null(空对象引用)
6.symbol
引用类型:
1.Object(Array Function )
* 5. 预编译前奏
暗示全局变量：即任何变量,如果变量未经声明就赋值,此变量就为全局对象所有
a=10 ----> window.a = 10
function test(){
var a = b = 123
}
预编译四部曲:
1.创建AO对象
2.找形参和变量声明,将变量和形参名作为AO属性名,值为Undefined
3.将实参值和形参统一
4.在函数体里面找函数声明,值赋予函数体
例子：`function fn(a){
console.log(a)
var a = 123;
console.log(a)
function a(){}
console.log(a)
var b= function (){}
console.log(b)
function d(){}
}
fn(1)
AO{
a:undefined 1 function a(){} 123 123
b:undefined function(){}
d:function(){}
}
`
* 6.闭包
`function a(){
var num = 100;
function b(){
num++;
console.log(num)
}
}`
var demo = a()
demo() 此时a的执行期上下文已被销毁
demo()
aA0 {num:100->101->102}
`function test(){
var arr = []
for(var i =0;i<10;i++){
arr[i] = function() {
document.write(i+"")
}
}
return arr
}`
var myArr = test()
for(var j= 0 ;j<10;j++){
myArr[j]()
} //10 10 10 10 10 10 ....
`function test(){
var arr = []
for(var i = 0;i<10;i++){
(function(j){
arr[j] = function(){
document.write(j+"")
}
}(i))
}
return arr
}`
var myArr = test()
for(var j= 0 ;j<10;j++){
myArr[j]()
}
闭包现象:
当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用域链不释放,造成
内存泄漏
闭包应用:
1.实现公有变量
eg:含税累加器
`function add(){
var count = 0;
function demo(){
count++;
console.log(count)
}
}`
var counter = add()
counter()
counter()
counter()
`function test(){
var num = 100;
function a(){
num++;
console.log(num)
}
function b(){
num--;
console.log(num)
}
return [a,b]
}`
var myArr = test()
myArr[0]()
myArr[1]()
2.可以做缓存(存储结构)
eg:eater
`function eater(){
var food = ""
var obj = {
eat:function(){
console.log("i am eating"+food)
food = ""
},
push:function(myFood){
food = myFood
}
}
return obj
}`
var eater1 = eater()
eater1.push('banana')
eater1.eat()
3.可以实现封装,属性私有化
eg:Person()
4.模块化开发,防止污染全局变量
*7.立即执行函数
针对初始化功能的函数
(function(){
var a = 123;
var b = 234;
console.log(a+b)
}())
var num = (function(a,b,c){
var d= a + b + c * 2 - 2
return d
}(1,2,3))
*8. 原型
1.定义:
1.1:原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先,可以继承该原型的属性和方法.原型也是对象
1.2:利用原型特点和概念,可以提取共有属性
1.3:对象如何查看原型 ->隐式属性__proto__
1.4:对象如何查看对象的构造函数->constructor
2.案例:
//Person.prototype = {} 是祖先
Person.prototype.name = "hehe"
function Person(){
}
var person = new Person()
3.继承
Person.prototype.name = "abc"
function Person(){
<!--var this = {
__proto__ :Person.prototype
}-->
}
var obj = {
name:"sunny"
}
var person = new Person()
更改原型:person.__proto__ = obj
Person.prototype.name = "sunny"
function Person(){
//var this = {__proto__:Person.prototype}
}
var person = new Person()
Person.prototype = {
name:"cherry"
}
person.name ->sunny
Person.prototype.name = "sunny"
function Person(){
}
Person.prototype = {
name:"cherry"
}
var person = new Person()
4.原型链(原型上面加原型加原型形成链)
Grand.prototype.__proto__ = Object.prototype(所有对象的最终原型)
Grand.prototype.lastName = "Deng"
function Grand(){
}
var grand = new Grand()
Father.prototype = grand
可以理解为原本 grand.__proto__ = Grand.prototype
你现在Father.prototype = grand
也就是说 Father.prototype.__proto__ = Grand.prototype
function Father(){
this.name = "xuming"
}
var father = new Father()
Son.prototype = father
function Son(){
this.hobbit = "smoke"
}
var son = new Son()
Person.prototype = {
height:100
}
function Person(){
this.eat = function(){
this.height++
}
}
var person = new Person()
person.eat()
person {height:101}
person.__proto__ Object{height:100}
*9. call and apply
function Person(name,age){
this.name = name;
this.age = age;
}
var person = new Person('deng',100)
var obj = {}
Person.call(obj)---> 会让Person里所有预设的this指向obj
10.继承
继承发展史
1.传统形式 ->原型链
过多的继承了没用的属性
2.借用构造函数
不能继承借用构造函数的原型
每次构造函数都要多走一个函数
3.共享原型
不能随便改动自己的原型
4.圣杯模式
圣杯模式:
function inherit(Target,Origin){
function F(){}
F.prototype = Origin.prototype
Target.prototype = new F()
Target.prototype.constructor = Target
Target.prototype.uber = Origin.prototype
}
Father.prototype.lastName = "Deng"
function Father(){
}
function Son(){
}
inherit(Son,Father)
var son = new Son()
var father = new Father()
*11.命名空间
var init = (function() {
var name = "abc"
function callName(){
console.log(name)
}
return function(){
callName()
}
}())
init()
var initDeng = (function() {
var name = 123
function callName(){
console.log(name)
}
return function(){
callName()
}
}())
var obj = {
age:123,
sex:"male",
height:180,
weight:75,
__proto__:{
lastName:"deng"
}
}
for(var prop in obj){
console.log(obj.prop) //不对 会被转换成 obj['prop']
}
Object.prototype.abc = '123'
for(var prop in obj){
if(! obj.hasOwnProperty(prop)){
console.log(obj[prop]) deng 123
}
}
instanceof 关键字
function Person(){
}
var person = new Person()
A对象 是不是 B 构造函数构造出来的
看A对象的原型链上 有没有B的原型
A instanceof B
person instanceof Person true
person instanceof Object true
[] instanceof Array true
[] instanceof Object true
typeof([]) object
typeof({}) object
判断数组还是对象
[].constructor function Array(){}
var obj = {} obj.constructor function Object(){}
[].instanceof Array true
obj.instanceof Array false
Object.prototype.toString.call([]) this变为数组 [object Array]
Object.prototype.toString.call({}) this变为对象 [object Object]
Object.prototype.toString = function(){
识别 this
返回相应的结果
}
*12. 克隆
浅克隆 vs 深度克隆
var obj = {
name:"abc",
age:123,
card:['visa','master'],
wife:{
name:"bcd",
son:{
name:"aaa"
}
}
}
var obj1 = {
}
//1.判断是不是原始值 typeof() object
//2.判断是数组还是对象
//3.建立相应的数组或对象
function deepClone(origin,target){
var target = target || {},
toStr = Object.prototype.toString,
arrStr = "[object Array]"
for(var prop in origin){
if(origin.hasOwnProperty(prop)){
if(orgin[prop]!=="null"&&typeof(origin[prop]) == 'object'){
if(toStr.call(origin[prop]) == arrStr){
target[prop] = []
}else{
target[prop] = {}
}
deepClone(origin[prop],target[prop])
}else{
target[prop] = origin[[prop]
}
}
}
return target
}
