第一篇就献给自己学习javascript的一份笔记吧

javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。
单行注释,在注释内容前加符号 “//”
多行注释以"/*"开始,以"*/"结束

js数据类型
弱类型特性
原始类型 number string boolean null undefined
object 对象 Funtion Array Date

隐身转换
=== 类型不同 false
类型相同 NAN和任何东西比都不相等
对象的比较是通过引用比较 两个对象比较是不相等的
尝试类型转换和比较
null==undefined
number==string 转number
boolean==? 转number 1==true
object==number|string尝试对象转为基本类型 new string("hi")=="hi";
其他false

包装对象
string object string
number object number
boolen object boolen
使用原始类型进行操作 如调用方法、添加属性时会使用其包装类型 等同于新建一个object 但是完成后就会将这个
包装类型移除 不能得到添加的属性

类型检测
typeof 返回字符串 适合函数对象和基本类型判断
typeof function “function” typeof NaN “number”
注意typeof number “object” typeof null “object”(历史原因导致不能判断null)
instanceof 基于原型链 适合对象
左操作的对象的原型链上是否有右边构造函数的prototype属性

obj instanceof Object
左操作数基本类型则直接false
希望右操作数是函数对象或函数构造器 不是抛出error
任何一个构造函数都有一个prototype的对象属性 将用做通过new构造函数方式构造的对象原型
不同window或iframe之间对象检测不能使用instanceof 对象比较是通过引用 不同window下自然不同

Object.prototype.toString.apply([])==="[object Array]"
适合内置对象和基本类型 数值 函数
IE678 null和undefined返回[object object]

constructor 没个对象都有 继承自原型 指向构造这个对象的构造函数

duck type 通过特征 如数组有slice length

表达式是指能计算出值得任何可用程序单元
原始表达式
常量 直接量
关键字
变量

数组、对象的初始化表达式
{x:1,y:2} var o=new Object(); o.x=1 o.y=2;
函数表达式
属性访问表达式
o.x o[‘x‘]
调用表达式
对象创建表达式 new Object;

运算符
操作数数量
赋值 比较 算数 位 逻辑 字符串 特殊

var val=(1,2,3); 每个表达式都被计算 val=3
Object.defineProperty(obj,‘x‘,{
configurable:false,
value:1
})
无法 delete obj.x

in运算符
function Foo(){}
Foo.prototype.x=1;
new var obj=new Foo();
obj.hasOwnProperty(‘x‘);
obj._proto_.hasOwnProperty(‘x‘);

this运算符

void 0 undefined

对象
属性时无序的
一个字符串key对应value
属性标签writable enumerable configurable value 方法get/set
[[proto]] [[class]] [[extensible]]

创建对象
字面量(嵌套)

new/原型链
function foo(){}
foo.prototype.z=3 [[proto]] Object.prototype 再往上原型null
var obj=new foo(); [[proto]] foo.prototype
type of obj.toString; "function"
‘z‘ in obj; true
obj.hasOwnProperty(‘z‘); false
给对象赋值不会向原型链查找即不改变原型链上的值
delete不会影响到原型链

var obj=Object.create({x:1});
obj.hasOwnProperty(‘x‘); false
var obj=Object.create(null);
obj.toString; undefined

属性读写
obj.x 常用
obj["x"]
for(;i<=n;i++){
console.log(obj[‘x‘+i]);
}
var p:
for(p in obj){ //原型链上的属性、顺序不确定
console.log(obj[p]);
}

delete Object.prototype; false
var descriptor=Object.getOwnPropertyDescriptor(Object,‘prototype‘);
descriptor.configurable; false

var定义的全局变量 局部变量是不能删除的
函数声明也是 全局 内部
都是不能delete
如果是隐式创建 ohNo=1;window.onNo;// 1 delete ohNo; //true
eval() 可以被delete

属性检测
in操作符 原型链
hasOwnProperty
propertyIs 是否可枚举 toString不可枚举 原型链上大部分是不可枚举

Object.defineProperty(对象,属性名,对象(设置标签{enumerable:false,vale:1000});) 默认writable/configurable等都是false
其他方式创建的对象 默认可枚举、configurable都是true

car.legs!=undefined 等价于 !==undefined !==null 非严格等于下 undefined==null

for(key in obj){
if(obj.hasOwnProperty(key)){
console.log(key);
}
}

另一种读写属性方法
getter/setter
get age(){ return ..},
set age(val){..} 还是用逗号隔开
function foo(){
Object.defineProperty(foo.prototype,‘z‘,{get:function(){return 1;}});
}
var obj = new foo();
obj.z; //1
obj.z=100;
obj.z; //1
由于z在赋值创建时在obj中是没有的 而原型链中有set get方法时 回调用原型链的get方法 而不是像正常情况下写入obj中
只能采用
Object.defineProperty(obj,‘z‘,{value:100,configurable:true});
delete obj.z; //true
obj.z; //1

属性级的权限设置
Object.getOwnPropertyDescriptor({pro:true},‘pro‘); 判定的对象 字符串属性名
writable 属性是否可修改 写 enumerable 是否可被遍历 for in configurable是否可被修改 delete

var person={};
Object.defineProperty(person,‘name‘,{
configurable:fales;
writable:false;
enumerable:true;
value:"Bosn Ma"
});
Object.defineProperty(person,‘type‘,{
configurable:true;
writable:true;
enumerable:false;
value:"Object"
});
Object.keys(person); //["name"]
Object.defineProperties(person,{
title:{value:‘fe‘,enumerable:true}, //没写的属性默认false
corp:{value:‘BABA‘,enumerable:true}},
salary:{value:50000,writable:true,enumerable:true},
luck:{
get:function(){
return Math.random()>0.5?‘good‘:‘bad‘;
}
},
promote;{
set:function(level){
this.salary*=1 + level*0.1;
}
}
});
Object.getOwnPropertyDescriptor(person,‘corp‘);
person.promote=2;
person.salary; //60000

原型标签 _prototype_
class标签
var toString=Object.prototype.toString;
function getType(o){return toString.call(o).slice(8,-1);};
toString.call(null); //"[object Null]"
getType(null); //"null"
getType(new Number(1)); //"Number"
getType(1); //"Number"
Object.prototype.toString把参数变为对象再处理
typeof new Number(1); //"object"

extensible标签 是否可扩展 对象上的属性是否可以继续添加
var obj={x:1.y:2}
Object.extensible(obj);
Object.preventExtensions(obj);
Object.isExtensible(obj); // false
obj.z = 1;
obj.z; // undefined, add new property failed
Object.getOwnPropertyDescriptor(obj, ‘x‘);
// Object {value: 1, writable: true, enumerable: true, configurable: true}

Object.seal(obj);
Object.getOwnPropertyDescriptor(obj, ‘x‘);
// Object {value: 1, writable: true, enumerable: true, configurable: false}
Object.isSealed(obj); // true

Object.freeze(obj);
Object.getOwnPropertyDescriptor(obj, ‘x‘);
// Object {value: 1, writable: false, enumerable: true, configurable: false}
Object.isFrozen(obj); // true
这里提到的方法这是针对这个对象 不会影响原型链

序列化
JSON.stringfy
val:undefined 不会出现在序列化结果中
obj = {val : undefined, a : NaN, b : Infinity, c : new Date()};
JSON.stringify(obj); // "{"a":null,"b":null,"c":"2015-01-20T14:15:43.910Z"}"
JSON.parse(‘{"x":1}‘);

尝试把一个对象转化为值
toString还是valueOf取决操作符和特定情况
字符串拼接 toString
一元加好符 数字优先valueOf

数组是值得有序集合,每个值叫元素,没有元素都有数字位置编号,索引。js是弱类型的可以含有不同类型的元素 对象 数组

创建数组
字面量 var arr1=[,,] //undefined*2 这样不好
size from 0 to 4294967295 (2^23-1)
构造器 var arr=new Array(100); //undefined*100 new其实可以省略
数组元素读写
arr[5]=6;
delete arr[0] delete数组长度不变将元素变为undefined
数组元素增删 动态的 无需指定大小
arr[arr.length]=1 等价 arr.push(1) unshif()
arr.length-=1 pop() shift()
数组迭代
for(i=0;i<n;i++){}
无顺序for(i in arr){
if(arr.hasOwnProperty(i)){
}
}
二维数组
var arr=[[0,1],[2,3],[4,5]]; 遍历i,j for循环
稀疏数组
并不含有从0开始的连续索引 一般length属性比实际元素个数打
var arr1=[undefined]; var arr2=new Array(1);
0 in arr1; //true 有第0个元素undefined
0 in arr2; //false 长度为1
for in遍历的是key

数组方法
{} Object.prototype
[] Array.prototype
slice()切片 splice()胶接
join 将数组转为字符串 默认逗号分隔
function repeatString(str,n){
return new Array(n+1).join(str);
}
repeatString("a",3); //"aaa"
reverse() 将数组逆序 原数组也被修改
sort() 排序 默认按照字母顺序排序 原数组被修改
arr.sort(function(a,b){
return a-b;
});
concat() 数组合并 原数组未被修改
var arr=[1,2,3];
arr.concat([10,11],13); [1,2,3,10,11,13]
arr.concat([1,[2,3]]); [1,2,3,1,[2,3]]
slice 放回数组片段 左闭右开区间的元素 负数加length 元数组未修改
splice 数组拼接 返回切掉的元素 原数组被修改
arr[1,2,3,4,5];
arr.splice(1,1,‘a‘,‘b‘); //returns [2]
arr; // [1,"a","b",3,4,5]

ES5 ie9+
forEach() 数组遍历
arr.forEach(function(x,index,a){
console.log(x + ‘|‘ + index + ‘|‘ + (a===arr));
})
map() 数组映射 不修改原数组
arr.map(function(x){
return x+10;
})
filter() 数组过滤 不修改原数组
arr.filter(function(x,index){
return index % 3 === 0||x>=8;
})
every() some() 数组判断 验证数组中元素
reduce() 数组中元素两两操作 原数组未修改
var arr=[1,2,3];
arr.reduce(function(x,y){
return x+y;
},0); 0+1 1+2 3+3 参数0没有的话 1+2 3+3
reduceRight()
将数组聚合成一个结果
indexOf() 不存在 -1 arr.index(1,-3); 从-3位置开始查找1
lastIndexOf()
判断是否为数组
Array.isArray([]); //true 注意不在Array.prototype上不能直接isArray()
[] instanceof Array; true
({}).toString.apply([]) === ‘[object Array]‘; true
[].constructor === Array; true

数组和一般对象
相同
都可以继承
数组是对象,对象不一定是数组
都可以当做对象添加删除属性
不同
数组自动更新length
按索引访问数组常常比访问一般对象属性明显迅速。
数组对象继承Array.prototype上的大量数组操作方法

字符串和数组
字符串是类数组,但是是不可改写的writable:false
str.chaAt();
str[1];
Array.prototype.join.call(str,"_");

函数是一块javascript代码 被定义一次 但可以执行和调用多次 js的函数也是对象 可以像其它对象那样操作和传递
我们称js的函数为函数对象
一般函数调用没有return 默认返回undefined
new构造 如果没有返回或返回是基本类型 默认返回是this 如果返回对象则将其作为new操作的返回值

不同调用方式
直接调用 foo();
对象方法 o.method();
构造器 new Foo();
call/apply/bind func.call(o);

创建函数
函数声明
函数声明会被前置 可以在函数声明前调用 (函数声明和变量声明都有这个操作)
不允许匿名 不能立即调用(函数声明被前置提前解析)
在定义该函数的作用域通过函数名调用,而函数表达式和函数构造不行
函数表达式
(function(){})
return function(){}
赋值 命名式函数表达式 var add=function foo(a,b){};
命名式函数表达式
var func=function nfe(){};
alert(func===nfe);
ie6-8 false
ie9+ "nfe is undefined" nfe是访问不到的
调试时可以看到函数名
利用函数名递归调用 但是不常用

Function构造器 var function= new Function(‘a‘,‘b‘,‘console.log(a+b);‘); Function.prototype 不常见
构造器里面创建的变量是局部变量 外面拿不到
它可以拿到全局变量 但是拿不到包裹它的外层函数定义的局部变量
没有函数名

this
全局的this
浏览器下window this===window
一般函数的this
function f1(){return this}; f1()===window;//true,global object
"use strict" undefined
作为对象方法的函数this
不看函数是如何创建 看函数调用的方法
var o = {prop: 37};
function independent() {
return this.prop;
}
o.f = independent;
console.log(o.f()); // logs 37

对象原型链上的this
var o = {f:function(){ return this.a + this.b; }};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5

get/set方法与this
function modulus(){
return Math.sqrt(this.re * this.re + this.im * this.im);
}
var o = {
re: 1,
im: -1,
get phase(){
return Math.atan2(this.im, this.re);
}
};
Object.defineProperty(o, ‘modulus‘, {
get: modulus, enumerable:true, configurable:true});
console.log(o.phase, o.modulus); // logs -0.78 1.4142

构造器中this
call/apply方法与this
bind方法与this
function f(){
return this.a;
}
var g = f.bind({a : "test"});
console.log(g()); // test
var o = {a : 37, f : f, g : g};
console.log(o.f(), o.g());

函数属性和arguments
foo.name 函数名
foo.length 形参个数
arguments.length 实参个数
arguments是类数组对象 原型不是Array.prototype

function foo(x, y, z) {
arguments.length; // 2
arguments[0]; // 1
arguments[0] = 10; 绑定关系 严格模式下不起作用 arguments是传入参数的副本 改变不了原参数
x; // change to 10;
arguments[2] = 100; 未传参数失去绑定关系
z; // still undefined !!!
arguments.callee === foo; // true 严格模式下禁止使用
}
foo(1, 2);
foo.length; // 3
foo.name; // "foo"

call/apply方法
function foo(x, y) {
console.log(x, y, this);
}
foo.call(100, 1, 2); // 1, 2, Number(100)
foo.apply(true, [3, 4]); // 3, 4, Boolean(true)
foo.apply(null); // undefined, undefined, window
foo.apply(undefined); // undefined, undefined, window

function foo(x, y) {
‘use strict‘;
console.log(x, y, this);
}
foo.apply(null); // undefined, undefined, null
foo.apply(undefined); // undefined, undefined, undefined

bind与currying
this.x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 81
var getX = module.getX;
getX(); // 9
var boundGetX = getX.bind(module);
boundGetX(); // 81
函数柯理化
function add(a, b, c) {
return a + b + c;
}
var func = add.bind(undefined, 100); a绑定100
func(1, 2); // 103
var func2 = func.bind(undefined, 200); b绑定200
func2(10); // 310

bind与new

时间: 2025-01-15 08:48:31

第一篇就献给自己学习javascript的一份笔记吧的相关文章

轻量级ORM框架——第一篇:Dapper快速学习

我们都知道ORM全称叫做Object Relationship Mapper,也就是可以用object来map我们的db,而且市面上的orm框架有很多,其中有一个框架 叫做dapper,而且被称为the king of ORM. 一:为什么选择Dapper 1. 性能优越: 其实在各大网站上,我们大概都会看到这样的一个对比效果图,在超过500次poco serialization的过程中所表现的性能,我们发现dapper是第二名, 当然第一名谁也无法超越,越底层的当然久越快,同时也就越麻烦.就好

第一篇博客——关于学习,人生的一些想法

一.对学习的一些想法 写下这篇文章已然是大三下学期伊始,关于程序技术的学习总结起来真的是一塌糊涂.也许是年龄的增长与读书多了(无关技术??),对人生的思考多了,很多东西应该艰苦奋斗了,比如学习.建立这个博客的目的很简单,为了记录一些我学习C++及一些相关书籍时的知识点,用以复习,回忆,如果还能惠及他人有所启发那是我的荣幸,当然这些基础简单的知识不成为大佬们的笑料就足够好了. 根据我目前的学习状况,做以下计划(根据进展,实际调整): 1.以易错易忘和面试常问的知识点出发(学习的目的不应该为应付面试

第一篇博客——python学习旅程开启

今天开始学习Python,以后会将自己的学习内容以及学习心得进行记录,以博客的形式和广大志同道合的朋友分享,如有错误还请大家能够批评指正,如果能帮到大家那就再好不过了. 今天的内容有些长,而且很简单,纯属是为了给自己回顾而写,加深印象,所以不接受吐槽. 在进入正式的python学习之前,你要知道的是python是一门动态解释型的强类型定义语言. 我们先来了解一下动态语言和静态语言的区别.动态类型语言是在运行时确定数据类型的语言,即永远不需要给任何变量指定数据类型.静态类型语言是指在编译时变量的数

【第一篇当然献给markdown】markdown入门

A First Level Header ==================== A Second Level Header --------------------- Now is the time for all good men to come to the aid of their country. This is just a regular paragraph. The quick brown fox jumped over the lazy dog's back. ### Hea

学习javascript语言精粹的笔记

1.枚举: 用for in 语句来遍历一个对象中所有的属性名,该枚举过程将会列出所有的属性也包括涵数和方法,如果我们想过滤掉那些不想要的值,最为常用的过滤器为hasOwnProperty方法,以及使用的typeof来排除, var name; for(name in another_stooge){ if(typeof another_stooge[name] !== "function"){ document.writeln(name + ":" + anothe

JavaScript代码段整理笔记系列(二)

上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey; //检测Alt event.ctrlKey; //检测Ctrl 17.获取屏幕分辨率的宽.高: window.screen.height; //获取屏幕的高 window.screen.width; //获取屏幕的宽 18.脚本永不出错的方式: window.onerror=function(m

献给初学者--学习ORACLE的第一篇故事

学习ORACLE感触 刚接触ORACLE 数据库没多久,从网上看到一篇描写ORACLE体系知识的故事,叫<SID之家>,抱着兴趣读了一遍,没想到,该故事非常好,对初学者了解ORACLE数据库的体系非常有帮助.且在以后的学习过程中,学到不同阶段ORACLE,在读一遍,也会有不同的感悟.该故事与ORACLE数据库所做的事情进行关联,关联的非常好.在此献给想学习ORACLE数据库的初学者. -_-(其实已经出来很多年了,但是忍不住还是想推广给想学ORACLE数据库的人,因为我就是因为这篇故事才进入了

《javascript权威指南》读书笔记——第一篇

<javascript权威指南>读书笔记--第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本书来补充下. 今天是今年的196天,由于我之前承诺过,每天分享读书笔记,只是之前分享的是大众读物,所以随手分享到kindle阅读群里了.但是现在读的是技术类书籍,分享到kindle读书群不太合适,所以还是以博客的形式分享.这样子,一个链接,大家感兴趣了就点开看看,不感兴趣了,就不点开. 其实这篇文章应该是昨天

一步步学习javascript基础篇(3):Object、Function等引用类型

我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂数据类型(即引用数据类型) Object类型 我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的.然,它的两种创建方式我们是否了解呢? 1.通过构造函数来创建 如: var obj = new Object(); 在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值.