[学习笔记] 动态网页开发基础之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/

评论