JavaScript脚本语言

简介

W3C参考资料

基础入门

初探JavaScript

什么是JS?

JS是通过事件给网页添加交互、修改样式

onmouseover="one.style.display='block'"
.:可以理解是汉语中的的
=:可以理解是赋值
编写JS的流程
  1. 布局:HTML+CSS
  2. 属性:确定修改哪些属性
  3. 事件:确定用户做哪些操作
  4. 编写JS:在事件中,用JS来修改页面元素样式

函数定义

function 函数名(){
       代码
}

变量定义

"上双宝剑",就是别名。

基础应用

DOM应用

JS运动技术

JS事件

Ajax

什么是服务器

网页浏览过程分析;如何配置自己的服务器程序(AMP-WAMP)

什么是Ajax

无刷新

缓存

解决缓存的方式:'aaa.txt?t='+new Date().getTime()

读取动态数据

数组、json

eval();函数

HTTP请求方式

面向对象

什么是面向对象

  1. 对象:黑盒子,不了解内部的结构,知道表面的各种操作(遥控器按钮)。
  2. 面向对象:不了解原理的情况下,会使用提供的功能。面向对象是一种通用的思想(电视机)。

JS中的面向对象

  1. 抽象:抽取核心内容,把最主要的特征、跟问题相关的特征抽取处理。
  2. 封装:看不到里面的东西,用好表面的功能就行。
  3. 继承:从父类上继承出一些方法和属性,子类又有一些自己的特征。(多重继承、多态)

对象组成

  1. 函数(自由的,不属于任何人)、方法(属于对象的,方法是作为对象的属性的函数)
  2. 变量(自由的,不属于任何人)、属性(属于对象的,属性是作为对象的属性的变量)

第一个面向对象的程序

  1. this:当前发生事件的对象。当前的方法、属性属于谁!使用该方法、属性的对象的引用。
  2. Object对象:是一个空白对象。
  3. 原型(prototype)
标签 功能 JS
CSS 一次给一组元素加样式 原型
Class 一次给一个元素加样式 给对象加东西
  1. 类:模子,不具备实际功能。
  2. 对象:产品(成品),具有实际的功能。

创建对象的七种方式

  1. 工厂模式(原料-加工-出厂)
function createPerson(name, job) { // 构造函数就是普通函数
    var o = new Object(); // 原料
    o.name = name; // 加工
    o.job = job;
    o.sayName = function() {
        console.log(this.name);
    }
    return o; // 出厂
}
var person1 = createPerson('Jiang', 'student');
var person2 = createPerson('X', 'Doctor');

可以无数次调用这个工厂函数,每次都会返回一个包含两个属性和一个方法的对象,工厂模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别问题,即不能知道一个对象的类型。①没有new;②函数的重复—资源浪费,即person1.sayName()==person2.sayName()是不相等的函数。

  1. 构造函数模式
function Person(name, job) {
    this.name = name;
    this.job = job;
    this.sayName = function() {
        console.log(this.name)
    }
}
var person1 = new Person('Jiang', 'student');
var person2 = new Person('X', 'Doctor');

没有显示的创建对象,使用new来调用这个构造函数,使用new后会自动执行如下操作(创建一个新对象(object)、这个新对象会被执行[[prototype]]链接、这个新对象会绑定到函数调用的this、返回这个对象);使用这个方式创建对象可以检测对象类型(person1 instanceof Object // true; person1 instanceof Person //true)

  1. 原型模式
function Person() {

    Person.prototype.name = 'Jiang';
    Person.prototype.job = 'student';
    Person.prototype.sayName = function() {
        console.log(this.name);
    }
    var person1 = new Person();
}

将信息直接添加到原型对象上。使用原型的好处是可以让所有的实例对象共享它所包含的属性和方法,不必在构造函数中定义对象实例信息。原型是一个非常重要的概念,在一篇文章看懂proto和prototype的关系及区别中讲的非常详细。

  1. 组合使用构造函数加属性模式和原型模式加方法(重点)
function Person(name, job) {
    this.name = name;
    this.job = job;
    Person.prototype.sayName = function() {
        console.log(this.name)
    }
    var person1 = new Person("guo", "student");
}

构造函数加属性,原型加方法!

  1. 动态原型模式
function Person(name, job) {
    // 属性
    this.name = name;
    this.job = job;

    // 方法
    if (typeof this.sayName !== 'function') {
        Person.prototype.sayName = function() {
            console.log(this.name);
        }
    }

}
var person1 = new Person('Jiang', 'Student');
person1.sayName();

动态原型模式将所有信息都封装在了构造函数中,初始化的时候,通过检测某个应该存在的方法时候有效,来决定是否需要初始化原型。只有在sayName方法不存在的时候,才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。此后原型已经完成初始化,不需要在做什么修改了,这里对原型所做的修改,能够立即在所有实例中得到反映,其次,if语句检查的可以是初始化之后应该存在的任何属性或方法,所以不必用一大堆的if语句检查每一个属性和方法,只要检查一个就行。

  1. 寄生构造函数模式
function Person(name, job) {
    var o = new Object();
    o.name = name;
    o.job = job;
    o.sayName = function() {
        console.log(this.name);
    }
    return o;
}
var person1 = new Person('Jiang', 'student');
person1.sayName();

这个模式,除了使用new操作符并把使用的包装函数叫做构造函数之外,和工厂模式几乎一样。构造函数如果不返回对象,默认也会返回一个新的对象,通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时返回的值。

  1. 稳妥构造函数模式
function Person(name, job) {
    var o = new Object();
    o.name = name;
    o.job = job;
    o.sayName = function() {
        console.log(name);
    }
    return o;
}
var person1 = Person('Jiang', 'student');
person1.sayName();

首先明白稳妥对象指的是没有公共属性,而且其方法也不引用this。稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new),或防止数据被其他应用程序改动时使用,稳妥构造函数模式和寄生模式类似,有两点不同:一是创建对象的实例方法不引用this,而是不使用new操作符调用构造函数。和寄生构造函数模式一样,这样创建出来的对象与构造函数之间没有什么关系,instanceof操作符对他们没有意义。

面向过程到面向对象

  1. 不能有函数的嵌套,但是可以有全局变量。
  2. 将onload变成构造函数
  3. 将全局变量改为属性
  4. 函数改为方法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,056评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,842评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,938评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,296评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,292评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,413评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,824评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,493评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,686评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,281评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,820评论 3 305
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2 341

推荐阅读更多精彩内容