原型和共有属性
1.关系
- JS的对象只能存简单数据类型和地址,不能存对象
2.如何确定一个对象的原型
函数fn由谁构造,fn的原型就是谁的prototype属性对应的对象
let obj = new Object()
的原型是Object.prototype
let arr = new Array()
的原型是Array.prototype
let square = new Square()
的原型是Square.prototype
let fn = new Function()
的原型是Function.prototype
原因是:new
操作故意这么做的
3.原型公式
对象.__proto__ === 其构造函数.prototype
两个的值相同,都是同一个地址
4.案例
例1:
let x = {}
的原型
由于对象的原型是其构造函数的prototype
对应的对象
而x
是一个对象,因此的构造函数是Object
内存图:
注意区分属性名和属性值的区别,Object
是名,#203
这个地址对应对象才是window.Object
的值
例2:
Object.prototype
是哪个函数构造出来的?- 答:没有构造函数和原型
- 特殊点:
Object.prototype
是唯一一个__proto__
为null的对象
对象需要分类
1.对象需要分类的原因
1.1 理由一
- 很多对象拥有一样的属性和行为
- 需要把它们分为同一类
- 如
square1
和square2
- 这样创建对象的时候就很方便
1.2 理由二
- 还有很多对象拥有其他的属性和行为
- 需要不同的分类
- 如
Square
/Circle
/Rect
就是不同的分类 Array
(数组)和Function
(函数)也是不同的分类- 而
Object
创建出来的对象,是最没有特点的对象
2.类型V.S.类
- 类型
类型是JS数据的分类,有7种
四基两空一对象 - 类
针对于对象的分类,有无数种(构造函数)
常见的有:Array
、Function
、Date
、RegExp
3.数组对象
数组是一个对象
- 定义一个数组
let arr = [1,2,3]
(缩写)
let arr = new Array(1,2,3)
:元素为1,2,3
let arr = new Array(3)
:数组长度为3,但没有函数名和函数值,是empty
- 数组对象的自身属性
'0'
/'1'
/'2'
/'length'
注意:属性名没有数字,只有字符串 - 数组对象的共用属性
push
/pop
/shift
/unshift
/jion
具体用法都在MDN - 数组对象比普通对象多一层共有属性
4.函数对象
- 定义一个函数
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')
其中的'return x+y'
是函数体 - 函数对象自身属性
'name'
(一般不用管)/'length'
(接收参数的个数,2就是接收两个参数x
和y
) - 函数对象共用属性
'call'
/'apply'
/'bind'
JS终极一问
window
是谁构造的?
Window
(注意首字母大写)
可以通过window.constructor
属性看出构造者window.Object
是谁构造的?
window.Function
所有的函数对象都是由window.Function
构造出来的window.Function
是谁构造的?
window.Function
所有的函数对象都是由window.Function
构造出来的(并非是自己构造了自己)
浏览器构造了Function
,然后指定它的构造者是自己
class语法
ES6引入了新语法:class
语法
class
引用了更多的概念- 就是构造函数的另一种写法
引入了新的概念
class Square{
//引入其他概念,可以不写
static x = 1//x是Square,要用x写:Square.x
width = 0//给初始化this,没有也可以
//构造函数
constructor(width){
this.width = width
}
//共同属性
getArea(){
return this.width * this.width
}
getLength(){
return this.width * 4
}
// 只读属性,调用area2的时候不需要加括号,直接 square.area2
get area2(){
return this.width * this.width
}
}