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深入浅出 ...
随机推荐
- UltraEdit-32文本编辑器软件 23.20.0.28 中文版
软件名称: UltraEdit-32文本编辑器软件软件语言: 简体中文授权方式: 共享软件运行环境: Win 32位/64位软件大小: 21.5MB图片预览: 软件简介:UltraEdit 是一个功能 ...
- 关于scanf()函数的一点理解
习惯了c++的cin.cout之后,也不怎么关注空格,反正cin.cout会自动处理.有一次实验,创建Huffman树,要求输入空格字符,当时就懵逼了.cin咋输入空格呢? 没办法,只能重新用scan ...
- 敏捷开发之Scrum
现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后他人,于是我也开始学习Scrum,今天主要是对我最近阅读的相关资料,根据自己的理解,用自己的话来讲述Scrum中 ...
- 关于ajax跨域问题
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- Linux MySQL5.5源码安装
环境:CentOS7,MySQL5.5 1.MySQL5.5源码下载 Oracle的网站打开较慢,http://mirrors.sohu.com/mysql/这里提供了MySQL的镜像.一般的,Lin ...
- 微信小程序支付步骤
http://blog.csdn.net/wangsf789/article/details/53419781 最近开发微信小程序进入到支付阶段,一直以来从事App开发,所以支付流程还是熟记于心的.但 ...
- mysql5.7.14 配置
1. 下载并解压 zip包 2.将解压后的目录 bin 配置到path中 3.修改my-default.ini 文件名为my.ini 4.配置my.ini [mysql] #设置mysql客户端默认 ...
- webapp在Android中点击链接的时候会有淡蓝色的遮罩层
body{-webkit-tap-highlight-color: rgba(0,0,0,0);}
- SQL语句的优化
1.创建索引 表中数据经常需要用的哪些字段数据进行过滤,则添加该字段的索引,索引相当如一本书的目录,能加快查询数据的速度:同时在新建索引的时候,将需要查询的列,在包含性 列中新增上去,能减少查询语句的 ...
- 移动app的一些心得
周末的时候闲着没事,看到了个开源的红旅动漫的APP,于是自己就拿下来写了下,整个网站作者也解析成了接口,所以就可以写成app了,作者写的是用mui开发的,可以通过hbuilder软件打开,进行查看源代 ...