对象的分类
使用代码输出正方形,圆,长方形的周长和面积
函数和原型结合写法
let squareList =[];
let widthList =[5,6,5,6,5,6,5,6,5,6,5,6];
function createSquare(width){
let obj = Object.create(createSquare.squarePrototype)
obj.width = width;
return obj
}
createSquare.squarePrototype = {
getArea(){
return this.width * this.width
},
getLength(){
return this.width * 4
}
constructor: createSquare;
}
for(let i = 0; i<12; i++){
squareList[i] = createSquare(widthList[i])
console.log(squareList[i].constructor)
}
使用new操作符简写代码
let squareList =[]
let widthList =[5,6,5,6,5,6,5,6,5,6,5,6]
function Square(width){
this.width = width
}
Square.prototype.getArea = function(){
return this.width * this.width
}
Square.prototype.getLength = function(){
return this.width * 4
}
for(let i = 0; i<12; i++){
squareList[i] = new Square(widthList[i])
console.log(squareList[i].constructor)
}
new 操作符,提供自身属性,共有属性2个函数
每个函数都有prototype属性,每个prototype都有constructor属性
f1.prototype.constructor=== f1
f1函数的prototype属性的constructor的值是这个函数本身
new 操作符
new X()自动做了四件事
自动创建新对象
自动为空对象关联原型,原型的地址制定为 X.prototype
自动将空对象 作为this 关键字运行构造函数
自动 return this
构造函数X
X函数本身负责给对象本身添加属性
X.prototype对象负责保存对象的共有属性
代码规范
所有构造函数 首字母大写
所有被构造出来的函数 首字母小写
词性
new后面的函数 使用名词形式 new Person(),new Object()
其它函数 一般使用动词开头 create Squar(5),create Element('div')
New Array(3)
一个新的数组,里面只有一位时,代表这个数组的长度,内容是空,长度为3个空的数组
New Array(3,5)
里面有2位时,数组里面的值为(3,5)
JS里唯一的公式
如何确定一个对象的原型
let obj =new Object() 的原型是 Object.prototype
let array =new Array() 的原型是 Array.prototype
let square =new Square() 的原型是 Square.prototype
let fn =new Function() 的原型是 Function.prototype
new 操作符自动为空对象关联原型,原型的地址制定为 X.prototype
你是谁构造的,你的原型就是谁的prototype属性对应的对象
原型公式: 对象._ _proto_ _ ===其构造函数.prototype
正方形代码
function Square(width){
this.width = width
}
Square.prototype.getArea = function(){
return this.width * this.width
}
Square.prototype.getLength = function(){
return this.width * 4
}
let square = new Square(5)
square.width
square.getArea()
square.getLength()
圆代码
function Circle(radius){
this.radius = radius
}
Circle.prototype.getArea = function(){
return Math.pow(this.radius,2) * Math.PI
}
Circle.prototype.getLength = function(){
return this.radius * 2 * Math.PI
}
let circle = new Circle(5)
circle.radius
circle.getArea()
circle.getLength()
长方形代码
function Rect(width, height){
this.width = width
this.height = height
}
Rect.prototype.getArea = function(){
return this.width * this.height
}
Rect.prototype.getLength = function(){
return (this.width + this.height) * 2
}
let react = new Rect(4,5)
rect.width
rect.height
rect.getArea()
rect.getLength()
对象需要分类吗
需要分类,因为不同的对象有不同的功能,一些对象又有相同的功能
理由一
有很多对象拥有一样的属性和行为,需要把他们分为同一类
例如 square1 和 square2,这样创建类似对象的时候就很方便
理由二
但是还有很多对象拥有其他的属性和行为,所以就需要不同的分类
比如Square/Circle/Rect就是不同的分类
Object创建出来的对象,是最没特点的对象
类型 和 类
类型
类型是JS数据的分类,有7中
四基两空一对象
类
类是针对于对象的分类,有无数种
常见的有Array(数组)Function(函数)Date(日期)RegExp(正则)
数组对象
定义一个数组(正常情况下,对象都是new出来的,但是可以缩写)
数组对象比普通对象多一层共有属性,调用属性时先调用近的
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 连接,在数组中连接起来,会变成字符串
arr2 =[1,2,3]
arr2.join('方') '1方2方3方'
函数对象
定义函数
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'
JS构造问题
window是谁构造的
Window
可以通过window.constructor查看构造者
window.Object是谁构造的
window.Function
因为所有函数都是window.Function构造的
window.Function是谁构造的
window.Function
因为所有函数都是window.Function构造的
并不是自己构造自己,是浏览器构造了Function,然后指定构造者是他自己
0bject.prototype 是哪个函数构造出来的
开始时默认就有它,没有构造者
0bject.prototype 的原型是什么 没有原型
0bject.prototype._ _proto_ _ null
原型 和 类
原型语法


class Square{
static x=1;
width =0;
constructor(width){
this.width = width
}
getArea(){
return this.width * this.width
}
getLength: function(){
return this.width * 4
}
get area2(){
return this.width * this.width
}
}
class 圆的代码
class Circle{
constructor(radius){
this.radius = radius
}
getArea(){
return Math.pow(this.radius,2) * Math.PI
}
getLength(){
return this.radius * 2 * Math.PI
}
}
let circle = new Circle(5)
circle.radius
circle.getArea()
circle.getLength()
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)
rect.width
rect.height
rect.getArea()
rect.getLength()