JavaScript我的第n+1次学习

一，数据类型

五种原始类型：

number,

string, 对应的包装类String

boolean,

null,

undefined,

对象类型：

Function, Array, Date。。。

相等 vs 严格相等

typeof vs instanceof vs Object.prototype.toString

typeof，适合基本类型及function检测，遇到null失效。
instanceof，适合自定义对象，也可以用来检测原生对象，在不同iframe和window间检测时失效。
Object.prototype.toString，遇到null和undefined失效

二，表达式

数组，对象初始化表达式：

[1,2] ==> new Array(1,2);[1,,,4] ==> [1, undefined, undefined, 4];{x:1, y:2} ==> var o = new Object(); o.x1 = 1; o.x2 = 2;

函数表达式：

var func = function(){};
// 直接将函数用括号扩起来，然后再最后面写一个括号，表示函数调用。
(function(){console.log('hhhhiiii');})();

属性访问表达式：

var o = {x:'hello'};
//访问1
o['x']
//访问2
o.x

对象创建表达式：

new Func(1,2);  //带参数
new Object;     //不带参数

调用表达式：

func(); //函数名加上()

三，运算符

三目运算符：c ? a: b

逗号运算符：var val = (1,2,3); // val == 3;

delete：删除一个属性

in：判断一个属性是否属于某个对象

instanceof：根据原型链来判断

new/this/typeof/void，略

四，对象

对象中包含一系列属性，属性是无序的，一个属性由key和value组成。

对象的创建：(1)字面量var o = {x:1, y:2}，可嵌套 (2)new 构造器 (3)Object.create({x:3});

原型链(有点像Java里面类的继承)

五，属性标签

用下面的方法获取一个对象的属性值

Object.getOwnPropertyDescriptor({pro:true}, 'pro');
{ value: true,writable: true,enumerable: true,configurable: true }//如果属性不存在，则返回undefined
Object.getOwnPropertyDescriptor({pro:true}, 'prr');
undefined

给对象创建一个属性

> Object.defineProperty(person, 'name', {
... configurable:false,
... writable:false,
... enumerable:true,
... value:'Jackey'
... });//因为writable是false的，所以不能修改name的属性
> person.name //打印当前name值
'Jackey'
> person.name=100;　//修改name值
100
> person.name;　//可以看到并没有被修改
'Jackey'
> delete person.name;　//删除也是删除不了的
false

对象标签：proto, isExtensible, class

对象序列化

六，数组

6.1 弱类型，什么样类型的元素都可以往里面塞

var arr = [1, true, null, undefined, {k:1}, [1,2,3]];

6.2 创建数组

//除了使用6.1那样使用字面量的方法，还可以如下
var arr = new Array();
var arrWithLength = new Array(10);
var arrLikeLiteral = new Array(true, false, null, 11, 'rrr');

6.3 元素增删除

动态，无需指定大小．

var arr = [11,22,33,44];
//尾部添加元素
arr.push(-55);
//头部添加元素
arr.unshift(-11)
//尾部删除元素
arr.pop();
//头部删除元素
arr.shift();

6.4 数组迭代

//法1
for(var i = 0; i<arr.length; i++) {console.log(arr[i]);
}
//法2
for(i in arr) {console.log(arr[i]);
}
//原型链上添加元素
Array.prototype.x='added';
//遍历数组会访问添加的元素//使用这个判断可以过滤
if(arr.hasOwnProperty(i)){console.log(arr[i]);
}

6.5 数组方法

Array.prototype.join
Array.prototype.reverse
Array.prototype.sort //1.in place 2.sort by string order
Array.prototype.concat //array to be filled will be flatted
Array.prototype.slice　//原数组不被修改
Array.prototype.splice //原数组被修改
Array.prototype.forEach
Array.prototype.map //数组映射
Array.prototype.filter //数组过滤
Array.prototype.every //表示每一个元素都要符合一定的条件
Array.prototype.some  //表示任一个元素，只要一个符合
Array.prototype.reduce
Array.prototype.reduceRight
Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.isArray

示例 reduce

var arr = [11, 22, 33, 44];
var sum = arr.reduce(function(x, y){return x+y;
}, 0);var max = arr.reduce(function(x ,y){return x>y?x:y;
});

示例判断数组

Array.isArray({});
[] instanceof Array;
({}).toString.apply([]) === '[object Array]';
[].constructor === Array;

数组 vs 对象

相同
1.都可以继承
2.都可以当作对象添加/删除属性

不同
数组自动更新length
数组对象继承Array.prototype上的大量数组操作方法

七，函数

Js函数不同于其他语言中的函数，js函数可以像其他对象那样操作和传递，所以js函数也称为函数对象．

7.1 调用方法

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

函数声明

function add(a, b) {a = +a;b = +b;if(isNaN( || isNaN(b)) return;return a + b;
}

函数表达式

//function variable
var add = function(a,b) {// do sth
}//Immediately Executed Function
(function() {// do sth
})();// first-class function
return function() {// do sth
}   // Named function expression
var add = function foo(a,b) {// do sth
}

变量&函数的声明前置

7.2 this

(1) 在浏览器中，全局的this，就是window；

在node.js中，全局的this，就是global．

console.log(this.document === document);
console.log(this === window);
this.a = 37;
console.log(window.a);

function f1() {return this;
}
f1() === global; // true

严苛模式下：

function f1() {"use strict";return this;
}
f1() === global;    //false
f1() === undefined; //true

(2) 作为对象方法的函数的this

var o = {prop:37;f:function() {return this.prop;}
};
console.log(o.f());

(3) 对象原型链上的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());

(4) 构造器中的this

function MyClass() {this.a = 73;//没有return或返回值为基本类型，则将this作为返回值
}
var o = new MyClass();
console.log(o.a); //73

function C2() {this.a = 37;return {a:38};　//回值为对象类型，则将该对象作为返回值
}
o = new C2();
console.log(o.a);　//38

(5) call/apply与this

function add(c, d) {return this.a + this.b + c+ d;
}var o = {a:1, b:3};
add.call(o, 5,7);　//1+3+5+7 = 16
add.apply(o, [10, 20]); //1+3+10+20=34function bar() {console.log(Object.prototype.toString.call(this));
}bar.call(7); //"[object Number]"

(6) bind与this

function f() {return this.a;
}var g = f.bind({a:"test"});
console.log(g());var o = {a:37, f:f, g:g};
console.log(o.f(), o.g());

7.3 函数属性&arguments

function foo(x, y, z) {arguments.length;arguments[0];arguments[0] = 10;x;arguments[2] = 100;z;arguments.callee === foo;
}
foo(1, 2);
foo.name; //函数名
foo.length; //形参个数
arguments.length; //实参个数

call & apply

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

bind,　改变函数里面的this

this.x = 9;
var module = {x:81,getX: function() {return this.x}
};
module.getX(); //81var getX = module.getX;
getX(); // 9var boundGetX = getX.bind(module);
boundGetX(); // 81

bind与currying

function add(a,b,c) {return a+b+c;
}var func1 = add.bind(undebined, 100); //100被赋值给第1个参数a
func1(1,2); //103, 1赋值给b,2赋值给cvar func2 = func1.bind(undebined, 200); //因a已经绑定到了a，200会绑定到b
func2(10);  //310, 10绑定到c

bind与new

function foo() {this.b = 100;return this.a;
}var func = foo.bind({a:1}); //this指向bind的参数func(); //因为this指向对象{a:1}，所以返回值this.a就是1
new func(); //会产生一个空对象，空对象指向foo_prototype，返回值忽略this.a；直接将100返回（what the fuck!）

八，函数和作用域

8.1 闭包

(1) 演示闭包

function outer() {var localVal = 30;return function() {return localValue;}
}var func = outer(); //外部函数调用完之后，localVal不能立即释放，因为return的函数引用了它
func(); //30

(2) 闭包常用错误：循环闭包

function Outer {var tempList = [];for (var i = 0; i < 10; i++) {tempList[i] = function () {return i;}}return tempList;
}
//调用方：
var list = Outer();
for (var i = 0; i < list.length; i++) {console.log(list[i]() + " "); // 闭包回调, 10, 10, 10, 10...
}

(3)闭包概念

闭包（也称词法闭包或函数闭包）是指一个函数或函数的引用，与一个环境变量绑定在一起．这个引用环境是一个存储该函数每个非局部变量（也叫自由变量）的表．

闭包，不同于一般的函数，它允许一个函数在立即词法作用域外调用时，仍可访问非本地变量．

8.2 作用域

js没有块作用域的概念

(1) 全局，局部

var globle_a = 10; //全局变量
(function() {var func_b = 20; //函数局部变量
})();
console.log(globle_a); //10
console.log(func_b);   //error, b is not definedfor(var item in {a:1, b:2}) {console.log(item);
}
console.log(item);  // item is still in scopeeval("var a = 1;");

(2) 执行上下文

全局的this(浏览器)
一般函数的this(浏览器)
作为对象方法的函数的this
对象原型链上的this
get/set方法与this
构造器中的this
call/apply方法与this
bind方法与this

九，OOP

9.1 基于原型的继承

function Foo() {this.y = 2;
}typeof Foo.prototype; // "object"
Foo.prototype.x = 111;
var obj = new Foo();obj.y; //2
obj.x; //111

Foo.prototype的结构：

{
   constructor:Foo,
   _proto_:Object.prototype,
   x:1
}

prototype是函数上预设的对象属性，原型是构造器的prototype属性(what the fuck!!!)

9.2 图解原型链

对象继承代码示例

function Person(name, age) {this.name = name;this.age  = age;
}Person.prototype.hi = function() {console.log('Hi, my name is '+this.name +", I'm " + this.age + " years old now.");
};Person.prototype.LEGS_NUM = 2;
Person.prototype.ARMS_NUM = 2;
Person.prototype.walk = function() {console.log(this.name + " is walking");
};function Student(name, age, className) {Person.call(this, name, age);this.className = className;
}Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;Student.prototype.hi = function() {console.log('Hi, my name is ' + this.name + ", I'm " +this.age + " years old now, and from " +this.className + ".");
};Student.prototype.learn = function(subject) {console.log(this.name + ' is learning ' + subject + ' at '+ this.className+'.');
}// test
var littleTom = new Student('Tom', 20, 'Class 3, Grade 2');
littleTom.hi();
littleTom.LEGS_NUM;
littleTom.walk();
little.learn('computer science');

多种方式实现继承

function Person() {}
function Student() {}
Student.prototype = new Person(); //1
Student.prototype = Object.create(Person.prototype); //2
Student.prototype.constructor = Person; //3

JavaScript我的第n+1次学习相关推荐

Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...
Javascript模拟c#中arraylist操作（学习分享）
最近在看javascript,在<javascript高级编程>中也学到了不少东西.但是在这里要感谢博客园的"汤姆大叔" 的无私奉献,他的关于javascript相关博 ...
JavaScript设计模式与开发实践(网课学习)
Js设计模式与开发实践面向对象 5大设计原则 23种设计模式(实际只有21种) 设计模式主要分为下面三大类创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模 ...
【JavaScript】以小说的方式打开学习JavaScript的新大门
JavaScript是一种轻量级的动态编程语言,在诞生之时,JavaScript 并没有受到人们的过多关注,但是谁也想不到,在大前端快速风靡的今天,JavaScript已经成为当今编程世界中优雅而不 ...
【javascript基础】由demo来进阶学习闭包等概念
Demo 1:闭包初识先要认识几点现实: 函数外部无法访问函数内部的局部变量. 函数内的嵌套函数可以访问函数的局部变量将嵌套函数作为闭包返回到外部空间,外部空间通过执行返回的嵌套函数可以实现外部空 ...
《JavaScript权威指南第六版》学习笔记-JavaScript概述
第一章.JavaScript概述 JavaScript是一门高端的.动态的.弱类型的编程语言,非常适合面向对象和函数式的编程风格.JavaScript的语法源自Java,它的一等函数(first-cl ...
《JavaScript高级程序设计第3版》-学习笔记-1
P1-P30页 1.<script>标签的属性 async:async(html) | async="async"(xhtml),表示立即下载脚本,但不马上执行(执行 ...
JavaScript之childNodes属性、nodeType属性学习
1.childNodes属性:在一颗节点树上,childNodes属性可以用来获取任何一个元素的所有元素,它是一个包含这个元素所有子元素的数组. <body><script type ...
231个web前端的javascript特效分享（仅供本人学习，非教程类型）
2019独角兽企业重金招聘Python工程师标准>>> 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange: ...
《JavaScript高级语言设计》(第三版)学习笔记(1)
javascript和ECMAScript通常被人们表达相同的含义一个完整的JavaScript由三个部分组成:ECMAScript(核心),DOM(文档对象模型),BOM(浏览器对象模型) 由EC ...

JavaScript我的第n+1次学习

JavaScript我的第n+1次学习相关推荐

最新文章

热门文章