1、构造函数和原型对象
1.1 概述
类是对象的模板,对象是类的实例,ES6之前没有类的概念,用构造函数来定义对象和它们的特征
创造对象三种方式:
1.对象字面量
let obj1 = {}
2.new Object()
let obj2 = new Object()
3.自定义构造函数
和 new 一起配合使用
//构造函数内部定义方法,会造成内存浪费
function Star(name,age) {
this.name = name;
this.age = age;
this.sing = function() {
console.log(this.name + " " + this.age);
}
}
let ldh = new Star("刘德华",56);
ldh.sing(); //刘德华 56
1.2 实例成员与静态成员
- 实例成员:构造函数内部通过this添加的成员
this.name
、this.age
、this.sing
都是- 只能通过实例化的对象访问
- 静态成员:在构造函数本身上添加的成员
sex = "男"
,sex 就是静态成员- 只能通过构造函数访问
Star.sex
1.3 原型对象 prototype
每一个构造函数都有一个 prototype 属性,指向一个对象。这个对象的所有属性和方法,都会被构造函数所拥有,可以把不变的方法定义在 prototype 对象上,这样所有对象实例都可以共享这些方法 //节约内存资源
function Star(name,age) {
this.name = name;
this.age = age;
}
Star.prototype.sing = function() {
console.log(this.name + " " + this.age);
}
let ldh = new Star("刘德华",56);
let zxy = new Star("张学友",57);
console.log(ldh.sing === zxy.sing); //true
1.4 对象原型 __proto__
不是标准的W3C属性,实际开发中不能使用
每一个对象都有一个属性 __proto__
属性,指向它的构造函数的原型对象 prototype
let ldh = new Star("刘德华",56);
ldh.sing // 指向 Star 的 prototype
console.log(ldh.__proto__ === Star.prototype) //true
1.5 constructor 构造函数
对象原型 __proto__
和 原型对象 prototype 里都有一个 constructor 属性,指向构造函数本身。很多情况下手动设置 constructor 属性指回原来的构造函数
function Star(name,age) {
this.name = name;
this.age = age;
}
Star.prototype = {
constructor: Star, //指回Star,如果不加这句,那原来的constructor会被覆盖,指向一个新的Object(原型替换)
sing: function() {
console.log("我会唱歌");
},
movie: function() {
console.log("我会演电影");
}
}
let ldh = new Star("刘德华",56);
console.log(ldh.__proto__) //Star(name,age){...}
console.log(Star.prototype) //Star(name,age){...}
2、函数对象的成员
函数也是对象
2.1__proto__
返回 Function.prototype
function test() {
console.log('我是test函数');
}
console.log(test.__proto__ === Function.prototype); //true
2.2 name
返回函数名
function test() {
console.log('我是test函数');
}
console.log(test.name) //test
2.3 length
返回形参的长度
function f(num1,num2,num3,num4,num5){
console.log(f.length);
}
f(10,20,30); //5
2.4 caller
-
如果fn2函数在fn1函数中被调用, 那fn2函数的caller就是fn1.
-
如果fn2是直接调用的,没有在一个函数中调用,那fn2的caller就是null.
function fn1() {
console.log('我是fn1函数');
fn2();
}
function fn2() {
console.log('我是fn2函数');
console.log(fn2.caller);
}
fn1();// 返回fn1函数
fn2();// null