技术文章 | Technical articles

JavaScript进阶课堂笔记 第五天

一、原型

每一个函数都有一个prototype属性,它的值是一个对象

对于普通函数来说, 它的作用不大

但是对于构造函数,作用:实例共享方法

举例:

// 定义构造函数

function People(name, age, sex) {

this.name = name;

this.age = age;

this.sex = sex;

}

// 其实我们使用布兰达艾奇 为我们提供的People.prototype属性添加方法,并且也不需要在函数中定义函数名

People.prototype.say = function() {

10  console.log("你好");

11 }

12 

13 // 实例化对象

14 var xiaoming = new People("小明", 12, "");

15 var xiaohong = new People("小红", 12, "");

16 xiaoming.say();

17 xiaohong.say();

18 

19 

20 console.log(xiaoming.say === xiaohong.say);

21 // 原型的作用: 实例共享方法

22 // 构造函数的方法要写在原型上

 

1.1 hasOwnProperty

该方法是检测某个方法是否在构造函数中

 

举例:

// 定义一个构造函数

function People(name, age, sex) {

this.name = name;

this.age = age;

this.sex = sex;

this.say = function() {

 console.log("你好");

}

}

10 

11 // 方法写在原型上

12 People.prototype.intro = function() {

13  console.log("大家好, 我今年" + this.age + "岁了");

14 }

15 

16 

17 // 实例化对象

18 var xiaoming = new People("小明", 12, "");

19 var xiaohong = new People("小红", 12, "");

20 xiaoming.say();

21 xiaoming.intro();

22 xiaohong.say();

23 xiaohong.intro();

24 

25 // 同样是方法, 如何区别方法是在构造函数中还是在原型上?

26 console.log(xiaoming.hasOwnProperty("say") ? "say在身上" : "say不在身上");

27 console.log(xiaohong.hasOwnProperty("intro") ? "intro在身上" : "intro不在身上");

 

二、安全类

定义: 无论外部如何调用类, 得到的都是一个类的实例化对象

解决问题: 有些程序员,不使用new来调用构造函数,可能导致代码出现一些问题

 

举例:

 

function People(name, age, sex) {

// 判断this指向谁,从而决定代码如何执行

if (this === window) {

 // 说明没有使用new来调用,而是当做普通函数来调用,如果一个普通函数中想要返回内容,需要使用return

 return new People(name, age, sex);

} else {

 // 说明使用new 来调用函数

 this.name = name;

 this.age = age;

10   this.sex = sex;

11  }

12 }

13 


三、继承

子类继承父类的属性和方法

继承分为三种:

   1 类式继承

2 构造函数式继承

3 组合式继承

3.1 类式继承

// 定义父类

function People() {

}

People.prototype.sayHello = function(){}

// 定义子类

function Student() {

}

// 继承

Student.prototype = new People();

10 // 注意补回constructor属性

11 Student.prototype.constructor = Student;

3.2 构造函数式继承

注:其实跟继承没关系

// 定义父类

function People(name, age, sex) {

   this.name = name;

   this.age = age;

   This.sex = sex;

}

People.prototype.sayHello = function(){}

// 定义子类

function Student(name, age, sex, grade) {

10    People.apply(this, arguments);

11    // 新属性的继承代码一定要放在下方

12    this.grade = grade;

13 }

3.3 组合式继承

3.1 + 3.2

3.4 instanceof

该关键字用于判定某一个对象是否是某一个构造函数的实例

使用方式:

对象  instanceof 构造函数

 

四、内置构造函数

4.1 内置构造函数的分类

ECMAScript核心语法添加的内置构造函数:

ObjectArrayFunctionStringNumberBooleanRegExpDateError

 

4.2 Function

该构造函数用于定义函数

使用方式:

接受任意个字符串参数,除了最后一个都是形参

举例:

var fun = new Function("a", "b", "return a + b");

 

输出fun:

图片1.png

 

等价方式1

var fun = function() {

    return a + b;

}

 

等价方式2

function fun() {

   return a + b;

}

特点: 如果使用new Function得到的函数, 通过函数.name 得到的anonymous

如果使用函数声明式或者函数表达式打点调用name得到的是变量名称

 

函数有一个length属性,表示的是函数在定义的时候形参的个数

argument.length,表示的是函数在执行的时候实参的个数

 

4.3 RegExp

该构造函数用于定义正则表达式

使用方式:

接受两个参数

第一个参数:字符串,定义正则表达式的表达体

第二个参数: 字符串,正则表达式的修饰符 igm

 

举例:

// RegExp

var reg = /\s/g;

var reg1 = new RegExp("\\s", "g");

注: 因位字符串中也有转义字符,所以在使用构造函数定义表达式的时候,要多转义一次





6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 

从小白到就业,我们全权负责!

爱创课堂 言行一致、从不忽悠!

请把自己放心的交给我们吧!


上一篇文章: JavaScript进阶课堂笔记 第四天(下午)
下一篇文章: 为什么要选择爱创课堂学前端?
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>