我们先引入一个概念,JavaScript中用new关键字来调用的函数是构造函数,它可以构造对象。
new操作符
new X ()
自动做了四件事
- 自动创建空对象
- 自动为空对象关联原型,原型地址为
X.prototype
- 自动将空对象作为this关键字运行构造函数
- 自动return this
构造函数X - X函数本身负责给对象本身添加属性
-
X.prototype
对象负责保存对象的共有属性
一些规范
- 所有构造函数(用于创建对象的函数)首字母大写
- 所有被构造出来的对象,首字母小写
New后面的函数使用名词开头,比如new Person()
、new Object()
其他函数一般使用动词开头,比如createSquare(5)
、createElement('div')
举一个生动的例子:假设我们需要求12个正方形的周长和面积,每个正方形的边长为5和6相间,思路:
每个正方形自己固有的属性是边长,通过数组实现。然而他们的周长和面积计算方法是一样的,这属于他们的共有属性,所以则运用到函数和原型的结合。
let widthList = [5, 6, 5, 6, 5, 6, 5, 6, 5, 6, 5, 6]
let squareList = []
function Square(width) {
this.width = width
}
Square.prototype.getArea = function (width) {
return this.width * this.width
}
Square.prototype.getLength = function (width) {
return this.width * 4
}
for (i = 0; i < 12; i++) {
squareList[i] = new Square(widthList[i])
console.log(squareList[i].constructor)
}
如果条件变化一下,将正方形改成长方形,我们给定一个宽和高要求它的周长的面积,我们该怎么办呢。长方形不同于正方形的是它有两个参数,分别是 宽和高,只要在声明函数时,写两个参数即可。
function Rect(width, height) {
this.width = width
this.height = height
}
Rect.prototype.getArea = function (width, height) {
return this.width * this.height
}
Rect.prototype.getLength = function (width, height) {
return this.width * this.height
}
let rect = new Rect(4, 5)
原型公式
对象.__proto__
=其构造函数.prototype
类型和类
类型
JS中类型值得是七种数据类型:Number、String、Boolean、undefined、object、Null以及 Symbol。
类
类是针对于对象的分类,常见的有数组、函数、日期、正则等无数种。
这里介绍数组对象和函数对象。
数组对象
- 定义一个数组:
let arr = [1,2,3]
let arr = new Array(1,2,3) // 元素为 1,2,3
let arr = new Array(3) // 长度为 3
- 数组对象的自身属性
'0' / '1' / '2' / 'length'
这些都是字符串 - 数组对象的共有属性
'push' / 'pop' / 'shift' / 'unshift' / 'join'
函数对象 - 定义一个函数
function fn(x,y){return x+y}
let fn2 = function fn(x,y){return x+y}
let fn = (x,y) => x+y
let fn = new Function('x','y', 'return x+y')
- 函数对象自身的属性
'name' / 'length'
- 函数对象的共有属性
'call' / 'apply' / 'bind'
重要的问题:
- window是谁构造的
答:Window,可以通过constructor属性看到构造者 -
window.Object
是谁构造的
答:window.Function
因为所有函数都是window.Function
构造的 -
Window.Function
是谁构造的
答:window.Function
因为所有函数都是window.Function
构造的,浏览器构造了Function,然后指定他的构造者是他自己
Class语法
我们直接通过上文写过的长方形原型写法与class对比一下。
class写法:
class Rect{
constructor(width, height){
this.width = width
this.height = height
}
getArea(){
return this.width * this.height
}
getLength(){
return (this.width + this.height) * 2
}
}
let react = new Rect(4,5)
原型写法:
function Rect(width, height) {
this.width = width
this.height = height
}
Rect.prototype.getArea = function (width, height) {
return this.width * this.height
}
Rect.prototype.getLength = function (width, height) {
return this.width * this.height
}
let rect = new Rect(4, 5)
有图可知,对象本身的属性在class的语法中被写到了constructor(){ }
中,共有属性直接写在外面。class写法可能从理解层面比原型写法更容易一些,但是他们都是来给对象分类的,所以我们都有必要学习。