JavaScript

WY-javascript笔记

2015-06-03  本文已影响294人  ddai_Q

严格模式

曾益

使用

类型系统

标准类型

前五种为原始类型, object为引用类型

类型系统

保存区别

类型保存区别

复制区别

类型复制区别

类型说明
undefined 出现场景

undefined类型转换
Boolean: Boolean(undefined) === false

值 Boolean Number String
undefined false NaN "undefined"

null出现的场景

null类型转换

值 Boolean Number String
null false 0 "null"

Number类型转换

值 Boolean String
0 false "0"
1 true "1"
Infinity true "Infinity"
NaN false "NaN"

类型识别

Object.prototype.toString:可以识别标准类型以及内置（build-in）对象类型，不能识别自定义类型

function type(obj){
    return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

 type(1)  //number
 type('abc') //string
 type(true)  //boolean
 type(undefined) //undefined
 type(null)  // null
 type({})  //object
 type([])  // array
 type(new Date) //date
 type(/\d/) //regexp
 type(function(){})  //function

 function Point(x,y){
      this.x  = x;
      this.y = y;
 }
 type(new Point(1,2));  //object

constructor例子.可以识别标准类型（undefined/null除外-没有构造器）；识别内置对象；识别自定义类型

//判断原始类型
"jerry".constructor === String  // true
(1).constructor === Number //true
true.constructor === Boolean //true
({}).constructor === Object //true

//判断内置对象
[].constructor === Array //true

//判断自定义对象
function Person(name){
      this.name  = name;
 }
 new Person('jerry').constructor === Person //true

内置对象

构造对象

其他对象

对象Object

构造器说明

实例化对象方法

  var obj = new Object({age:12,name:'lili'})
  var obj = {age:12,name:'lili'};

属性方法

原型对象属性、方法

原型对象

Object.create
基于原型对象创建新对象

语法
Object.create(proto[,propertisObject])

例

 var proto = {a:1,b:2};
 var obj = Object.create(proto);
__proto__

__proto__ 称之为原型链，有如下特点：

Object.prototype.toString
获取方法调用者标准类型

obj.tostring()

Object.prototype.hasOwnproperty
判断一个属性是否是对象自身属性

obj.hasOwnProperty(prop)

   var proto = {a:1,b:2};
   var obj = Object.create(proto);
   obj.c = 1
   obj.hasOwnProperty('c');  // true
   obj.hasOwnProperty('a');  // false - a是对象原型连上的属性

其他类型像布尔类型转换

String.prototype.replace 查找字符串替换成目标字符
stringObj.replace(regexp/substr,replacement)

var str =  "1 plus 1 equal 3"
str = str.replace("1","2")  //str = "2 plus 1 equal 3"

str2.replace(/\d+/g, '$ & dollor')
//"2 dollor plus 1 dollor equal 3 dollor"

注：以上$ & 之间没有空格

**String.prototype.split **
stringObj.split(separator,howmany)

 var str = "1 plus 2 equal 3"
 str.split(" ") //["1","pluls","2","equal","3"]
 str.split(" ",3) //["1","pluls","2"]
 str.split(/\d+/);  //[""," plus "," equal ",""]

**Number.prototype.toFixed **
把Number四舍五入为制定小数位数的数字

numberObj.toFixed(num)

Array

Array.prototype.splice
从数组中删除或添加元素，返回被删除的元素列表(会更改原有的数组)

arrayObj.splice(start,deleteCount[,item1[,items....]])

Array.prototype.forEach
遍历数组元素并调用回调函数

arrayObj.forEach(callback[,thisArg])
function callback(value,index,arrayObj){.....}

function logArray(value,index,array){
    console.log(value)
    console.log(value === array[index])
}
//Note ellision,there is no member at 2, so it isn't visited
[2,5, ,9].forEach(logArray)
结果：2 true    5 true   9 true

Function
用于定义函数或者新对象构造器

实例化函数方法

原型对象属性、方法 - constructor,apply,call,bind
实例对象属性、方法 - length,prototype,arguments,caller

自定义对象构造器

//自定义构造器
function Point(x,y){
   this.x = x
   this.y = y
}
//自定义属性
Point.prototype.move = function(x,y){
    this.x += x
    this.y += y
 }
 //实例化
 var p = new Point(0,1)
Point自定义对象

Function.prototype.apply
通过参数指定函数调用者和函数参数并执行该函数

functionObj.apply(thisArg,[argsArray])

例1

Object.prototype.toString.apply("123") //[object String]

例2

//自定义构造器
 function Point(x,y){
   this.x = x
   this.y = y
}
//自定义属性
Point.prototype.move = function(x,y){
    this.x += x
    this.y += y
 }
 //实例化(原点)
 var p = new Point(0,0)  
 p.move(2,2) //移动到2，2点
 var circle = {x:1,y:1,r:1} //以原点为x=1,y=1,半径为1的圆
 //移动圆到3，2
 p.move.apply(circle,[2,1]);  //后面的参数为move所需参数.[x:3,y:2,r:1]
圆移动后

Function.prototype.bind
通过参数指定函数调用者和函数参数并返回该函数引用

functionObj.bind(thisArg[,arg1[,arg2[,....]]])

 function Point(x,y){
   this.x = x
   this.y = y
}
Point.prototype.move = function(x,y){
    this.x += x
    this.y += y
 }
 var p = new Point(0,0)  
 p.move(2,2) 
 var circle = {x:1,y:1,r:1} 
 //实现过一段时间再移动圆,bind
 var circleMove = p.move.bind(circle,2,1) // 返回函数引用
 setTimeout(circleMove,1000)

子类构造器

 function Circle(x,y,r){
   Point.apply(this,[x,y])
   this.radius = r
 }
 /**
 Circle.prototype = new Point()
 delete Circle.prototype.x
 delete Circle.prototype.y
 **/
 简化如下：
 Circle.prototype = Object.create(Point.prototype)
 
 Circle.prototype.constructor = Circle
 Circle.prototype.area = function(){
    return Math.PI*this.radius*this*radius
 }
 var c = new Circle(1,2,3)
 c.move(2,2)
 c.area()
原型方法 代码执行完之后

函数调用

函数参数

函数重载

 define(function(){
 var add = function(x, y) {
   return x + y;
 };
 return {
     add: add
 };
})

define(['lib'], function(){
 var add = function(x, y) {
  return x + y;
 };
 return {
    add: add
 };
})

define('math', ['lib'], function(){
  var add = function(x, y) {
  return x + y;
 };
 return {
    add: add
 };
})

// define 的实现代码
 /**
 * The function that handles definitions of modules. Differs from
 * require() in that a string for the module should be the first argument,
 * and the function to execute after dependencies are loaded should
 * return a value to define the module corresponding to the first argument's
 * name.
*/
 define = function (name, deps, callback) {
   var node, context;

//Allow for anonymous modules
if (typeof name !== 'string') {
    //Adjust args appropriately
    callback = deps;
    deps = name;
    name = null;
}

//This module may not have dependencies
if (!isArray(deps)) {
    callback = deps;
    deps = null;
}

// 省略以下代码
// ...
};

正则表达式

** RegExp.prototype.test **
功能：使用正则表达式对字符串进行测试，并返回测试结果
regexObj.text(str)

    var reg = /^abc/i;reg.test('Abc123'); 
    truereg.test('1Abc1234'); // false

Date
构造器说明：用于定义日期对象

其他内置对象，Math，JSON，全局对象

Math rondom, floor,ceil,round,abs,max,cos
Json parse,stringify

全局对象
属性： NaN, Infinity, undefined
方法：parseInt, parseFloat, isNaN,isFinite, eval ...
处理URL方法： encodeURIComponent, decodeURIComponent, encodeURI, decodeURI
构造器属性：Boolean,String,Number,Object,Function,Array,Date,Error.....
对象属性：
Math,JSON

var url = "http://www.baidu.com/reg.html?name="+ encodeURIComponent(name)

NaN

eval 可以计算某个字符串，并执行其中的javascript代码。eval(string)

parseInt 将字符串转化为数字

Paste_Image.png

encodeURIComponent 将URI参数中的中文、特殊字符等作为URI一部分进行编码

使用举例：URL中参数编码


encodedURIComponent举例

表达式

概念： js短语，解释器可以执行它并生成一个值

关系运算符

=== 类型与值都相等

==判断两边对象或值是否相等

以下都为true

非数值类型做==比较时，先转换为数值类型

==例外规则

逻辑运算 ！

逻辑运算 &&

逻辑运算 ||

var a = 0
var b = 0 || ++a
结果：a,b 为1,1

运算符优先级

Paste_Image.png

语句

for/in

遍历对象的属性

for(key in objS ){...}

with

with

变量作用域

静态作用域 在编译阶段就知道变量的引用

Paste_Image.png 根据foo函数找到全局的X

动态作用域 由动态栈来决定

x为20

JS变量作用域

词法环境

组成

什么时候创建词法环境？

词法环境-问题

JS 作用域-带名称的函数表达式

   (function A() {
         A = 1;
         alert(A);
    })();

首先看，这段代码，在全局的词法环境中，没有函数定义，没有变量定义，也没有形参。A是一个函数表达式，不是一个函数定义。所以不会被定义到全局的词法环境中。

此时，会把A单独定义一个词法环境。 里面的record是A函数，A函数内部是不能被修改的。所以，A=1是无效的。此时alert(A) 弹出的还是A函数。

Paste_Image.png

闭包

闭包的应用

保存变量现场 示例：

保存变量

封装示例：

封装

程序设计方法

JS面向对象

Constructor 创建构造器的三种形式

this

Paste_Image.png

构造器中的this 表示 即将创建的新对象。
JS 中，函数的this指向函数的调用者。在该例子中，构造器中的函数里面的 this表示的是p1,函数的调用者

New Function中的this，指的是，全局对象（window）

new Function

eval中的this,指调用上下文中的this

eval中的this

第一个闭包中的 eval上下文是全局，所以，this指向全局对象global ，window

第二个eval中的this调用上下文是在bar函数中的，所以 eval 中的this 与 bar函数中的this一样，bar函数的this指的是其调用者也就是Foo对象。

总节

this.png

原型

原型链

原型链-属性查找

属性查找&修改 
 tom.name = 'Tom Green' ; //首先查找自身属性，找到name 然后修改
 tom.job = 'assistant'; //自身找不到job属性，然后找原型链有job属性，然后给自身添加job属性，属性值为assistant，并不修改原型的job属性。
 teacher.prototype.job = 'assistant' //修改原型的job属性。那么访问：bill.job 得到的是 assistant.

原型链-属性删除

delete tom.job //只是删除tom上的job属性，如果在访问，则去原型上找job属性，并不会删除原型上的属性。

思考：如果判断一个属性来自于对象本身？

  //hasOwnProperty 判断是否来自对象本身。
  tom.hasOwnProperty('job')

ES5中的原型继承

Object.create(proto[,propertiesObject])

create

思考：如何在低版本浏览器实现Object.create功能？

URL

JS面向对象编程

全局变量

封装问题——信息隐藏

function A(){
  this.a = null;
  this.b = null;

this.step1 = function(){
    //TODO
}
this.step2 = function(){
    //TODO
}
this.api = function(){
    //TODO
}
}
访问都是公有的

封装形式

封装

类继承

类继承

ClassA是父类，ClassB是子类

原型链

原型继承

继承

右侧的clone 是兼容低版本浏览器不支持ES5的create

未完待续

上一篇 下一篇

猜你喜欢

热点阅读