一、原型
每一个函数都有一个prototype属性,它的值是一个对象
对于普通函数来说, 它的作用不大
但是对于构造函数,作用:实例共享方法
举例:
1 // 定义构造函数 2 function People(name, age, sex) { 3 this.name = name; 4 this.age = age; 5 this.sex = sex; 6 } 7 8 // 其实我们使用布兰达艾奇 为我们提供的People.prototype属性添加方法,并且也不需要在函数中定义函数名 9 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
该方法是检测某个方法是否在构造函数中
举例:
1 // 定义一个构造函数 2 function People(name, age, sex) { 3 this.name = name; 4 this.age = age; 5 this.sex = sex; 6 this.say = function() { 7 console.log("你好"); 8 } 9 } 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来调用构造函数,可能导致代码出现一些问题
举例:
1 function People(name, age, sex) { 2 // 判断this指向谁,从而决定代码如何执行 3 if (this === window) { 4 // 说明没有使用new来调用,而是当做普通函数来调用,如果一个普通函数中想要返回内容,需要使用return 5 return new People(name, age, sex); 6 } else { 7 // 说明使用new 来调用函数 8 this.name = name; 9 this.age = age; 10 this.sex = sex; 11 } 12 } 13 |
三、继承
子类继承父类的属性和方法
继承分为三种:
1 类式继承
2 构造函数式继承
3 组合式继承
3.1 类式继承
1 // 定义父类 2 function People() { 3 } 4 People.prototype.sayHello = function(){} 5 // 定义子类 6 function Student() { 7 } 8 // 继承 9 Student.prototype = new People(); 10 // 注意补回constructor属性 11 Student.prototype.constructor = Student; |
3.2 构造函数式继承
注:其实跟继承没关系
1 // 定义父类 2 function People(name, age, sex) { 3 this.name = name; 4 this.age = age; 5 This.sex = sex; 6 } 7 People.prototype.sayHello = function(){} 8 // 定义子类 9 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
该关键字用于判定某一个对象是否是某一个构造函数的实例
使用方式:
1 对象 instanceof 构造函数 |
四、内置构造函数
4.1 内置构造函数的分类
ECMAScript核心语法添加的内置构造函数:
Object、 Array、 Function、 String、 Number、 Boolean、 RegExp、 Date、 Error
4.2 Function
该构造函数用于定义函数
使用方式:
接受任意个字符串参数,除了最后一个都是形参
举例:
1 var fun = new Function("a", "b", "return a + b"); |
输出fun:
1 |
等价方式1:
1 var fun = function() { 2 return a + b; 3 } |
等价方式2:
1 function fun() { 2 return a + b; 3 } |
特点: 如果使用new Function得到的函数, 通过函数.name 得到的anonymous
如果使用函数声明式或者函数表达式打点调用name得到的是变量名称
1 函数有一个length属性,表示的是函数在定义的时候形参的个数 2 argument.length,表示的是函数在执行的时候实参的个数 |
4.3 RegExp
该构造函数用于定义正则表达式
使用方式:
接受两个参数
第一个参数:字符串,定义正则表达式的表达体
第二个参数: 字符串,正则表达式的修饰符 i、 g、 m
举例:
1 // RegExp 2 var reg = /\s/g; 3 var reg1 = new RegExp("\\s", "g"); |
注: 因位字符串中也有转义字符,所以在使用构造函数定义表达式的时候,要多转义一次
6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !
爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!
我们前端课程的五大优势:
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习)
3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K
4. 免费学习一周,不满意不收取任何费用
5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
从小白到就业,我们全权负责!
爱创课堂 言行一致、从不忽悠!
请把自己放心的交给我们吧!