js 面向对象解析

关于前端开发需要的主要技能 前端开发需要做 ios开发需要前端

一、生成对象的原始模式
//假设将人作为一个对象,并拥有 ‘name’ 和 ‘age’ 两个属性.
//var Person = { name = ”, age=” }, 运用这种原型对象的格式,生成两个示例对象
javascript 代码

var David = {}
David.name = ‘David’
David.age = 24
document.write(‘姓名:’ + David.name + ‘; 年龄:’ + David.age + ‘;’)

二、原始模式的改进
//运用函数
javascript 代码

function Person(name, age) {
    return {
        name: name,
        age: age,
    }
}
var niki = Person(‘Niki’, ’25’)
document.write(‘姓名:’ + niki.name + ‘; 年龄:’ + niki.age + ‘;’)

三、构造函数模式
//js中提供了一个构造函数(Constructor)模式,用来解决从原型对象生成实例的问题。
//构造函数:其实是一普通函数,但其内部使用了this变量;对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
javascript 代码

function Person(name, age) {
    this.name = name
    this.age = age
}
console.log(Person)
var avril = new Person(‘Avril’, 20)
document.write(‘姓名:’ + avril.name + ‘; 年龄:’ + avril.age + ‘; <br>’)
document.write(
    ‘avril的构造函数是Person is ‘ + (avril.constructor == Person) + ‘. <br>’,
)
document.write(‘avril是Person对象的实例 is ‘ + (avril instanceof Person) + ‘.’)

四、关于构造函数浪费内存的问题
//请看一段示例代码
function Person(name, color){
this.name = name;
this.age = age;
this.residence = ‘地球’;
this.work = function(){ console.log(‘地球’); }
}
//Person对象中有一个固定属性residence(居住地)、固定方法work;
//那么问题来了,对于Person的每个实例,residence属性和work方法都是相同的,那么每生成一次实例,都会重复生成新内容,多占用一些内存。
//如:
javascript 代码

function Person(name, age) {
    this.name = name
    this.age = age
    this.work = function() {
        console.log(‘开工’)
    }
}
var psn1 = new Person(‘Tom’, 26)
var psn2 = new Person(‘Jerry’, 24)
document.write(‘两个示例对象的work是否等同:’ + (psn1.work === psn2.work))

//那么如何解决这一问题,让residence属性和work方法在内存中只生成一次,而所有示例对象都指向相同的内存地址?
// ↓

六、prototype属性
//在js中,每个构造函数都有一个prototype属性,并指向另一对象。这个对象的所有属性和方法,都会被构造函数的实例对象继承。
//示例:
javascript 代码

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.residence = ‘地球’
Person.prototype.work = function() {
    console.log(‘开工’)
}
var psn1 = new Person(‘Tom’, 26)
var psn2 = new Person(‘Jerry’, 24)
console.log(
    ‘psn1与psn2的work方法是否为同一内存地址:’ + (psn1.work === psn2.work),
)

七、prototype的相关验证方法
1、isPrototypeOf()
//用来判断某个prototype对象与某实例的关系;
2、hasOwnProperty()
//每个实例对象都有一个hasOwnProperty(),可用来判断某属性为本地属性,还是继承自prototype对象的属性;
3、in运算符
// in 不仅可以遍历对象的各属性,还可以判断某实例是否含有某个属性(本地或非本地)。
//各示例:
javascript 代码

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.residence = ‘地球’
Person.prototype.work = function() {
    console.log(‘working’)
}
var tom = new Person(‘Tom’, 25)
tom.height = ‘180cm’
console.log(‘tom实例拥有height属性:’ + (‘height’ in tom))
console.log(
    ‘height属性是tom的本地属性:’ +
        tom.hasOwnProperty(‘height’) +
        ‘; residence属性也是tom的本地属性:’ +
        tom.hasOwnProperty(‘residence’),
)
console.log(
    ‘tom继承了Person的prototype属性:’ + Person.prototype.isPrototypeOf(tom),
)

前端开发人员需要考哪些证书 前端需要懂后台开发么 前端开发需要网络吗

» 本文来自:前端开发者 » 《js 面向对象解析》
» 本文链接地址:https://www.rokub.com/5861.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!