javascript 深入浅出 (未完成4-17)
慕课网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. 创建对象
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个步骤:
- 创建一个新对象;
- 将构造函数作用域赋予新对象(因此this指向新对象);
- 执行构造函数中的代码(为新对象添加属性);
- 返回新对象;
构造函数的改进版:
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)的更多相关文章
- JavaScript深入浅出第4课:V8引擎是如何工作的?
摘要: 性能彪悍的V8引擎. <JavaScript深入浅出>系列: JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼? JavaScript深入浅出第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 ...
- JavaScript深入浅出6-函数和作用域
慕课网教程视频地址:Javascript深入浅出 函数的概念:定义一次可调用多次的javascript代码段 创建函数:声明 function fuc(){} 声明前置 表达式 var fuc= ...
- JavaScript深入浅出5-数组
慕课网教程视频地址:Javascript深入浅出 数组:值的有序集合 创建数组:字面量,构造器new array() 数组的读写:push() 尾部加入新元素 unshift() 头部加入新元素 po ...
- JavaScript深入浅出4-对象
慕课网教程视频地址:Javascript深入浅出 对象的结构:包含一系列无序的属性,每个属性都有字符串key和对应的值 创建对象:对象字面量.new/原型链.Object.create 对象的属性操作 ...
- JavaScript深入浅出3-语句
慕课网教程视频地址:Javascript深入浅出 程序由语句组成,语句遵守特定语法规则 块 block {} 没有块级作用域 声明 var 异常 try catch finally 函 ...
- JavaScript深入浅出2-表达式和运算符
慕课网教程视频地址:Javascript深入浅出 表达式是指能计算出值的任何可用程序单元 原始表达式:常量.直接量 3.14,“test” 关键字 null,this 变量 i,k,j 表达式含:原始 ...
- JavaScript深入浅出1-数据类型
慕课网教程视频地址:Javascript深入浅出 javascript是弱数据类型语言,不需要显式的定义类型,一共有如下六种数据类型 原始类型:number string boolean null u ...
- 函数原型属性-JavaScript深入浅出(三)
前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了this深入浅出 ...
随机推荐
- mac生成ssh keys
打开终端 输入ssh-keygen,然后系统提示输入文件保存位置等信息,连续敲三次回车即可,生成的SSH key文件保存在中-/.ssh/id_rsa.pub
- angular js一探
下一代angular js. 概念:mvc:作为dataModel的$scope. 还必须导入angular的库. ng-app:告诉angular引擎从这里开始是他因该管理的内容.(引入之后,可以在 ...
- 打开myeclipse2014的包资源管理器
网上查到的方法不太适用于myeclipse2014,我就自己试了一下下 结果是:windows->show view->general->project package 结果: 希望 ...
- PHP程序员的技术成长规划(转)
按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...
- python基础-安装篇
1.安装之前我们要先去python的官网下载python的安装包 下载地址:https://www.python.org/downloads/ Python 官网有两个版本一个是3.5.2(最新版)一 ...
- ES CPU和磁盘IO升高
问题 ES监控出现偶尔的波动,CPU和磁盘IO升高 有时候在凌晨,业务请求比较低,也没有慢查询,GC也比较正常,没有出现Full GC ES内部的merge segment会占用CPU和磁盘资源,怀疑 ...
- MYSQL 命令行导入导出数据库文件
MYSQL命令行导入数据库 1.首先通过命令行进入到mysql安装目录的bin目录下,比如我输入的命令为: cd E:\MySQL\MySQL Server 5.5\bin,输入如下命令: mysql ...
- 利用commons-io.jar包中FileUtils和IOUtils工具类操作流及文件
1.String IOUtils.toString(InputStream input),传入输入流对象,返回字符串,有多重重载,可按需要传参 用例: @Test public void showIn ...
- 为Textview里面的ImageSpan添加点击响应事件
对于图文混排的TextView,用户在浏览到里面的图片的时候,往往有点击图片preview大图或者preview之后保存图片的需求,这就需要为Textview里面的ImageSpan设置点击响应事件. ...
- 为Array 添加indexOf
为array赋予属性 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (elt /*, from*/) { var ...