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深入浅出 ...
随机推荐
- NFV FD.io VPP VM 系统性能调优
Host Setting: 1.关闭power savings mode在BIOS中 2.设置 /sys/devices/system/cpu/cpu*/cpufreq/scaling_governo ...
- SQL 小笔记
如何得到字段的类型 select sql_variant_property(ID,'BaseType') from tb
- appium元素定位及操作
1.测试用例准备 数据准备 前提条件 操作步骤 预期结果 2.TestNG 用例组织:@Test @Before Class 结果验证:Assert 数据驱动:@DataProvide ...
- google浏览器图标显示不正常怎么办
taskkill /f /im explorer.exe rem 清理系统图标缓存数据库 attrib -h -s -r "%userprofile%\AppData\Local\IconC ...
- [转]cmd-bat批处理命令延时方法
批处理延时启动的几个方法 方法一:ping 缺点:时间精度为1秒,不够精确 @echo off @ping 127.0.0.1 -n 6 >nul start gdh.txt 方法二:vbs s ...
- Gdiplus 贴图(助记) -------------------拖动整个对话框
最简单的两种方法: 一.使WM_NCHITTEST始终返回HTCAPTION,也就是欺骗系统让他以为这是菜单栏. LRESULT CDemoDlg::OnNcHitTest(CPoint point) ...
- Mysql 基础语法1
MySQL的软件架构 1.开启MySQL服务器:以windows服务的形式开启,在cmd下net startmysql|net stop mysql,在cmd下使用mysqld –default-fi ...
- hdu1026
#include <stdio.h> #include <string.h> #include <queue> using namespace std; struc ...
- JQuery select option append
三种方法: $('select').append($('<option>', {value:1, text:'One'})); $('select').append('<option ...
- JS复习:第二十三章
一.Cookie的构成: 1.名称:一个唯一确定cookie的名称.cookie名称不区分大小写,必须是经过URL编码的. 2.值:存储在cookie中的字符串值,必须被URL编码. 3.域:cook ...