[学习笔记] 动态网页开发基础之JavaScript对象
# 学习 # · 2020-08-09
对象
1、JavaScript 提供多个内建对象,比如String、Date、Array等。对象(object)只是带有属性和方法的特殊数据类型(集合体)。
2、常见内置对象:String字符串对象、Date日期对象、Array数组对象、Boolean逻辑对象、Math算数对象、RegExp正则表达式对象。
3、创建对象:
(1)基于Object对象的创建方法:
var 对象名称 = new Object();
对象名称.属性名 = "属性值";
对象名称.方法名 = 方法体/方法名();
//实例
var person = new Object();
person.name = "多仔";
person.showName = function() {
alert(this.name);
}
(2)基于字面量赋值的创建方法:
var 对象名称 = {
属性名:属性值,
方法名:方法体/方法名,
}
//实例
var person = {
name:"卡多希",
showName:function() {
alert(this.name);
}
}
4、访问对象的属性和方法:
//访问属性
objectName.propertyName;
//访问方法
objectName.methodName();
//实例
var name = person.name;
person.showName();
构造函数
1、构造函数的步骤一:使用函数来构造对象:一般情况下构造函数的第一个字母使用大写字母。
function Person(name)
{
//this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象
this.name = name;
this.showName = function() {
alert(this.name);
}
}
2、构造函数的步骤二:创建一个新对象:
//p1和p2都是Person的实例。
var p1 = new Person("John");
var p2 = new Person("Sally");
3、构造函数的步骤三:执行构造函数中的代码。
p1.showName();
4、构造函数的步骤四:返回新对象。
5、constructor属性:用于返回对象的构造函数。
console.log(p1.constructor == Person); //输出true
console.log(p2.constructor == Person); //输出true
6、instanceof属性:用于检测是否存在于参数object的原型链。
console.log(p1 instanceof Person); //输出true
console.log(p1 instanceof Object); //输出true
原型对象
1、在JavaScript中,每当定义一个对象(函数也是对象)时候,对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype属性,这个属性指向函数的原型对象。
2、每个对象都有__proto__
属性,但只有函数对象才有prototype属性。
3、实例:
//构造函数Person有一个prototype的属性,指向原型对象(Person.prototype)。
//默认情况下,所有的原型对象(Person.prototype)都会自动获得一个constructor(构造函数)属性。
//这个属性(是一个指针)指向prototype属性所在的函数(Person)。
function Person() {
}
//通过prototype设置name属性和showName方法
//新对象的属性和方法由所有实例共享
Person.prototype.name = "Tom";
Person.prototype.showName = function() {
alert(this.name);
}
//new实例化
//Person创建的时候,创建了一个它的实例对象并赋值给它的prototype。
var p1 = new Person();
//Person.prototype = p1;
//结论:原型对象(Person.prototype)是构造函数(Person)的一个实例。
//实例的构造函数属性(constructor)指向构造函数
console.log(p1.constructor == Person); //输出true
console.log(Person.prototype.constructor == Person); //输出true
//实例化后的对象就可以调用Person.prototype中的属性和方法
p1.showName();
//在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性。
//__proto__属性用于指向创建它的构造函数的原型对象。
//对象p1有一个__proto__属性,创建它的构造函数是Person。
//构造函数的原型对象是Person.prototype。
console.log(p1.__proto__ === Person.prototype); //返回ture
4、关系图:
从关系图中可以得到以下结论:
Person.prototype.constructor == Person;
p1.__proto__ == Person.prototype;
p1.constructor == Person;
原型链
1、原型链:一个原型对象是另一个原型对象的实例。相关的原型对象层层递进,就构成了实例与原型的链条,就是原型链。
2、原型链:访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__
这条链向上找,这就是原型链。
3、实例:
//构造函数Person,原型对象Person.prototype
function Person() {
}
Person.prototype.name = "Tom";
Person.prototype.showName = function(){
console.log('我的名字叫:' + this.name);
}
//构造函数Worker,原型对象Worker.prototype
function Worker(){
}
Worker.prototype = new Person(); //继承Person
Worker.prototype.job = "student";
Worker.prototype.showJob = function(){ //子级添加新方法
console.log(this.job);
}
Worker.prototype.show = function(){
console.log('我的名字叫:'+this.name+'工作:'+this.job);
}
var p1 = new Worker();
p1.showName();
p1.show();
//输出结果:
//我的名字叫:Tom
//我的名字叫:Tom工作:student
从关系图中可以得到以下结论:原型链的形成是真正是靠__proto__
而非prototype。
5、完整的原型链关系图:console.log(this);
(1)第一步:分析Person
(2)第二步:分析Worker
(3)第三步:分析Worker.prototype的__proto__
(4)第四步:分析Worker.prototype的__proto__
的__proto__
(5)第五步:分析Object__proto__
(6)第六步:分析Function
(7)关系图详解:
对象继承
1、借用构造函数:
//应用某一对象的一个方法,用另一个对象替换当前对象。
apply([thisOjb[,argArray]])
//调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[,arg2[, [,argN]]]]])
2、实例:
// 父类构造函数
var Parent = function(name){
this.name = name;
this.sayHi = function(){
console.log("Hi! " + this.name + ".");
}
};
// 子类构造函数
var Children = function(name){
Parent.call(this, name); // 实现继承的关键
this.getName = function(){
console.log(this.name);
}
};
var p = new Parent("john");
var c = new Children("joe");
p.sayHi(); // 输出: Hi! john.
c.sayHi(); // 输出: Hi! john.
c.getName(); // 输出: joe
如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/64/
评论