浅谈JavaScript的面向对象思想(2)


function Person(name,age) {
    this.name = name;
    this.age = age;
 }
Person.prototype.getName = function () {
    return this.name;
 };
var person1 = new Person('Rose', 18);
var person2 = new Person('Jack', 20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName);//true//共享原型中定义的方法
 

缺点:属性定义在构造函数内,方法定义在构造函数外,与面向对象的封装思想不符。

第七种:构造函数+动态原型方式(推荐)

方式一:


function Person(name,age) {
    this.name = name;
    this.age = age;
    if (typeof Person._getName === "undefined"){
        Person.prototype.getName = function () {
            return this.name;
        };
        Person._getName = true;
    }
 }
var person1 = new Person('Rose', 18);
var person2 = new Person('Jack', 20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName);//true//共享原型中定义的方法
 

方式二:


function Person(name,age) {
    this.name = name;
    this.age = age;
    if (typeof this.getName !== "function"){
        Person.prototype.getName = function () {
            return this.name;
        };
    }
 }
var person1 = new Person('Rose', 18);
var person2 = new Person('Jack', 20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName);//true//共享原型中定义的方法


 

对象属性的扩展及删除

Javascript的对象可以使用 ’.’ 操作符动态的扩展其属性,可以使用 ’delete’ 关键字或将属性的值设置为 ’undefined’ 来删除属性。


function Person(name,age) {
    this.name = name;
    this.age = age;
    if (typeof Person._getName === "undefined"){
        Person.prototype.getName = function () {
            return this.name;
        };
        Person._getName = true;
    }
 }
var person = new Person("Rose",18);
person.job = 'Engineer';//添加属性
console.log(person.job);//Engineer
delete person.job;//删除属性
console.log(person.job);//undefined//删除属性后值为undefined
person.age = undefined;//删除属性
console.log(person.age);//undefined//删除属性后值为undefined
 

对象属性类型

数据属性

特性:

[configurable]:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true;

[enumberable]:表示是否可通过for-in循环返回属性。默认true;

[writable]:表示是否可修改属性的值。默认true;

[value]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性,其值为’My name’,对该值的修改都反正在这个位置


function Person(name,age) {
    this.name = name;
    this.age = age;
    if (typeof Person._getName === "undefined"){
        Person.prototype.getName = function () {
            return this.name;
        };
        Person._getName = true;
    }
 }
var person = new Person("Rose",18);
 Object.defineProperty(person,"name",{configurable:false,writable:false});
person.name = "Jack";
console.log(person.name);//Rose//重新赋值无效
delete person.name;
console.log(person.name);//Rose//删除无效
 

注意:

一旦将configurable设置为false,则无法再使用defineProperty将其修改为true(执行会报错:cannot redefine property : propertyName)


function Person(name,age) {
    this.name = name;
    this.age = age;
    if (typeof Person._getName === "undefined"){
        Person.prototype.getName = function () {
            return this.name;
        };
        Person._getName = true;
    }
 }
var person = new Person("Rose",18);
 Object.defineProperty(person,"name",{configurable:false,writable:false});
person.name = "Jack";
console.log(person.name);//Rose//重新赋值无效
delete person.name;
console.log(person.name);//Rose//删除无效
Object.defineProperty(person,"name",{configurable:true,writable:true});//Cannot redefine property: name
 

访问器属性

特性:

[configurable]:是否可通过delete操作符删除重新定义属性;

[numberable]:是否可通过for-in循环查找该属性;

[get]:读取属性时调用,默认:undefined;

[set]:写入属性时调用,默认:undefined;

访问器属性不能直接定义,必须使用defineProperty()或defineProperties来定义:如下

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/882e7416256eb145d8b5e8a58ec6a80d.html