慕课网javascript总结 课程地址

课程大纲:

一、数据类型 二、表达式和运算符 三、语句 四、对象 五、数组 六、函数 七、this 八、闭包和作用域 九、OOP 十、正则与模式匹配

------------------  正文部分开始-----------------------

一、数据类型

六种类型:

5种基本类型(String,Number,Boolean,Undefined,Null)+Object( Array,Date,RegExp,Function (从技术角度上来说,函数在ECMAScript中是对象,不是一种数据类型),基本包装类型,单体内置类型 )

类型检测:

1.typeof    返回字符串,适合基本类型(除了null, typeof null //Object)及函数检测 ( typeof (function(){}) // function       typeof [,,] // Object      typeof (new Date()) // Object      typeof {}// Object )

2.instanceof      返回布尔值,基于原型链来检测(原理: a instanceof b,看是否b(构造函数)的prototype属性在a的原型链上 ),适合对象检测(可以区分数组,日期等)适合自定义对象,也可以用来检测原生对象,在不同iframe和window间检测时失效。

3.Object.prototype.toString       JavaScript:Object.prototype.toString方法的原理

Object.prototype.toString.apply([]); === “[object Array]”;

Object.prototype.toString.apply(function(){}); === “[object Function]”;

Object.prototype.toString.apply(null); === “[object Null]”

Object.prototype.toString.apply(undefined); === “[object Undefined]”

4.constructor

5.duck type

二、表达式和运算符

表达式:

原始表达式    1.  常量、直接量  eg: 3.14 "string"  2. 关键字  eg: null this true

初始化表达式

函数表达式

属性访问表达式        eg: obj.x 或 obj.[x]

调用表达式         func()

对象创建表达式   eg: new Func(1,2)  或 new Object

运算符:

一元

三、语句

Javascript程序由语句组成,语句遵守特定的语法规则。

block  break  continue  empty  if...else  switch  try  catch

var function return do...while for   for...in   while

debugger label with

block:      块语句用一对花括号定义,但是javascript中没有块级作用域。 for循环中,var i 在花括号内和在花括号外声明效果相同。

function:  函数声明提升

for...in : 1. 顺序不确定 2. enumerable为false时不会出现 3. for in对象属性时受原型链影响

四、对象

ECMA-2把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来说,这就相当于说对象是一组没有特定顺序的值。对象的属性或方法都有一个名字,而每个名字映射到一个值。我们可以把ECMAScript的对象想象成散列表,无非就是一组名值对,其中值可以是数据或函数。(高程三 P139)

1. 创建对象

JavaScript创建对象4种方法详解

1.1  通过 Object()

使用Object构造函数来创建一个对象,即创建一个Object的实例,俗话说的new一个实例。

    var person = new Object();
person.name="kevin";
person.age=;
person.sayName = function(){
alert(this.name);
}

1.2 通过字面量

   var person =
{
name:"Kevin",
age:,
:"Test"
};
alert(person.name);
alert(person[""]);

1.3  工厂模式

function createPerson(name, age,job)
{
var o = new Object();
o.name=name;
o.age=31;
o.sayName=function()
{
alert(this.name);
};
return o; // 返回实例
}
createPerson("kevin",31,"se").sayName();

原理就是定义一个工厂函数,函数内部创建一个Object实例,然后向实例添加属性与方法,最后返回这个实例。

这个模式解决了创建相似对象的问题,缺点没有对象识别的功能(即怎样知道一个对象的类型)。

1.4   构造函数

参考总结的构造函数

 function Person(name,age,job)
{
this.name=name;
this.age=age;
this.job=job;
this.sayName=function() // 虽然每个对象拥有同名的方法,但其实每个对象实例的方法都是不同的Function实例。我们可以将this.sayName = function(){…}想象成this.sayName = new Function(“…”),这两个表达式逻辑上是等价的。
{ // 如果需要多个实例,则创建完成同样任务的多个Function实例是没有必要的 (高程三 P147)
alert(this.name); //
};
} var person = new Person("kevin",31,"SE");
person.sayName();

使用自定义构造函数模式创建对象。与工厂模式相比的优点,构造函数模式,没有显示创建Object实例,而且可以标识对象类型(可以找到实例的原型)。

定义构造函数注意的地方是: 函数名首字母大写; 实例化对象时要用new操作符;以这种方式调用构造函数,实际运行4个步骤:

  1. 创建一个新对象;
  2. 将构造函数作用域赋予新对象(因此this指向新对象);
  3. 执行构造函数中的代码(为新对象添加属性);
  4. 返回新对象;

构造函数的改进版:

     function Person(name,age,job)
{
this.name=name;
this.age=age;
this.job=job;
this.sayName=sayName; //将sayName()函数的定义转移到了构造函数的外部
} // sayName 包含的是一个指向sayName() 的指针
function sayName(){ // 因此,实例对象就共享了在全局作用域中定义的同一个函数sayName()
alert(this.name);
}

缺点是:

作用域

如果对象需要多个方法,则需要多个全局函数,于是自定义的引用类型就丝毫没有封装型可言了。

1.5 原型模式

我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

prototype是通过调用构造函数而创建的那个对象实例的对象原型,使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

     function Father(){};
Father.prototype.name = "hhhhh"; // 原型对象上 有 两个属性 和 一个方法,
Father.prototype.lastname = "wwwwww"; // 很自然,会想到要把他们合并到一个对象里面
Father.prototype.sayName = function(){}; // 就有了下面的 简写 的原型模式
var obj1 = new Father();
obj1.name // hhhhh

原型简写方式

   function Father(){};
Father.prototype = { // 与 字面量 声明对象 类似
name:"hhhhh", // 因此,原型对象 的 构造函数 指向了 Object()
lastname:"wwwww",
sayName:function(){
}
}
var obj1 = new Father();
console.log(obj1 instanceof Father); // true
console.log(Father.prototype.constructor); // Object() { [native code] }
console.log(obj1.constructor); // Object() { [native code] }

如果constructor很重要,则需要特意将其设为适当的值.

即在对象原型中添加属性

constructor:Father;     // 重新指向构造函数

原型的动态性

由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来。

如果重写整个原型对象,情况就不一样了。调用构造函数时会为实例添加一个指向最初原型的[[prototype]]指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。实例中的指针仅指向原型,而不指向构造函数。

     function Father(){};
var obj1 = new Father(); // 原型链已经构成
Father.prototype = { // 字面量方式,则原型对象被改写
name:"hhhhh",
lastname:"wwwww",
sayName:function(){
}
}
    function Person()
{ } Person.prototype = { //
constructor : Person,
name:"kevin",
age:31,
job:"SE",
friends:["Jams","Martin"],
sayFriends:function()
{
alert(this.friends);
}
};
var person1 = new Person();
person1.friends.push("Joe"); // 实例person1和person2访问的是同一组属性和同一个sayName()函数
person1.sayFriends();//Jams,Martin,Joe
var person2 = new Person();
person2.sayFriends();//James,Martin,Joe

问题所在:  (高程三 P158)

1. 所有实例默认情况下都将取得相同的属性值

2. 对于包含引用类型的属性值来说,问题很突出。 person1.friends和person2.friends指向的是同一个数组(在Person.prototype中,因此会造成互相影响)

 1.6 组合使用原型模式和构造函数创建对象

 function Person(name,age,job)                      // 构造函数部分 用于定义 实例 的属性
{
this.name=name;
this.age=age;
this.job=job;
   this.friends=["Jams","Martin"];
}
Person.prototype.sayFriends=function() // 原型部分 用于定义 方法 和 共享 的 属性
{
alert(this.friends);
};
var person1 = new Person("kevin",31,"SE");
var person2 = new Person("Tom",30,"SE");
person1.friends.push("Joe");
person1.sayFriends();//Jams,Martin,Joe
person2.sayFriends();//Jams,Martin

1.7 动态原型模式

 function Person(name,age,job)
{
//属性
this.name=name;
this.age=age;
this.job=job;
this.friends=["Jams","Martin"];
//方法
if(typeof this.sayName !="function") // 这段代码只有在初次调用时候才会执行
{
Person.prototype.sayName=function()
{
alert(this.name);
}; Person.prototype.sayFriends=function()
{
alert(this.friends);
};
}
} var person = new Person("kevin",31,"SE");
person.sayName();
person.sayFriends();
复制代码

1.8 寄生构造函数模式和稳妥构造函数模式

2. 属性检测

五、数组

六、函数

七、this

八、闭包和作用域

闭包:指有权访问另一个函数作用域中的变量的函数。(《高程三》P178 注意断句)

九、OOP

十、正则与模式匹配

http://www.imooc.com/comment/277

javascript 深入浅出 (未完成4-17)的更多相关文章

  1. JavaScript深入浅出第4课:V8引擎是如何工作的?

    摘要: 性能彪悍的V8引擎. <JavaScript深入浅出>系列: JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼? JavaScript深入浅出第2课:函数是一等 ...

  2. JavaScript深入浅出-闭包

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function (){ var localVal ...

  3. JavaScript深入浅出6-函数和作用域

    慕课网教程视频地址:Javascript深入浅出 函数的概念:定义一次可调用多次的javascript代码段 创建函数:声明 function fuc(){}  声明前置   表达式 var fuc= ...

  4. JavaScript深入浅出5-数组

    慕课网教程视频地址:Javascript深入浅出 数组:值的有序集合 创建数组:字面量,构造器new array() 数组的读写:push() 尾部加入新元素 unshift() 头部加入新元素 po ...

  5. JavaScript深入浅出4-对象

    慕课网教程视频地址:Javascript深入浅出 对象的结构:包含一系列无序的属性,每个属性都有字符串key和对应的值 创建对象:对象字面量.new/原型链.Object.create 对象的属性操作 ...

  6. JavaScript深入浅出3-语句

    慕课网教程视频地址:Javascript深入浅出 程序由语句组成,语句遵守特定语法规则 块 block  {}   没有块级作用域 声明    var 异常   try catch finally 函 ...

  7. JavaScript深入浅出2-表达式和运算符

    慕课网教程视频地址:Javascript深入浅出 表达式是指能计算出值的任何可用程序单元 原始表达式:常量.直接量 3.14,“test” 关键字 null,this 变量 i,k,j 表达式含:原始 ...

  8. JavaScript深入浅出1-数据类型

    慕课网教程视频地址:Javascript深入浅出 javascript是弱数据类型语言,不需要显式的定义类型,一共有如下六种数据类型 原始类型:number string boolean null u ...

  9. 函数原型属性-JavaScript深入浅出(三)

    前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了this深入浅出 ...

随机推荐

  1. PHP22期基础班技术总结

  2. nodejs 实现简单的文件上传功能

    首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传 ...

  3. url地址数据转换成json数据格式

    var urlToJson = function(){ var ret = {}; window.location.search.substr(1).replace(/(\w+)=(\w+)/ig, ...

  4. Topself 方便调试的Window服务框架

    Installing Topshelf nuget Install-Package Topshelf public class TownCrier { readonly Timer _timer; p ...

  5. OOP in JS Public/Private Variables and Methods

    Summary private variables are declared with the 'var' keyword inside the object, and can only be acc ...

  6. curl 命令使用总结

    curl 查看网页源码 curl www.sina.com 保存页面 -o curl -o [文件名] www.sina.com 直接在curl命令后加上网址,就可以看到网页源码. 如果要把这个网页保 ...

  7. 3.Thread中的静态方法

    1.currentThread() public class Thread14 extends Thread{ static { System.out.println("静态块的打印:&qu ...

  8. @PostConstruct 和 @PreDestory

    关于在spring  容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...

  9. Mybatis的失误填坑-java.lang.Integer cannot be cast to java.lang.String

    Mybatis的CRUD小Demo 为方便查看每次的增删改结果,封装了查询,用来显示数据库的记录: public static void showInfo(){ SqlSession session ...

  10. ARM驱动调试方法、思路总结、笔记

    驱动程序的调试一. 打印: prink, 自制proc文件UBOOT传入console=ttySAC0 console=tty11. 内核处理UBOOT传入的参数console_setup add_p ...