您的位置:首页 > Web前端 > JavaScript

全面理解面向对象的 JavaScript

2016-12-16 00:00 435 查看
对象的上下文依赖

var str = "我是一个 String 对象 , 我声明在这里 , 但我不是独立存在的!"
var obj = { des: "我是一个 Object 对象 , 我声明在这里,我也不是独立存在的。" }; var fun = function() { console.log( "我是一个 Function 对象!谁调用我,我属于谁:", this ); }; obj.fun = fun; console.log( this === window );     // 打印 true
console.log( window.str === str );  // 打印 true
console.log( window.obj === obj );  // 打印 true
console.log( window.fun === fun );  // 打印 true
fun();                              // 打印 我是一个 Function 对象!谁调用我,我属于谁:window
obj.fun();                          // 打印 我是一个 Function 对象!谁调用我,我属于谁:obj
fun.apply(str);                   // 打印 我是一个 Function 对象!谁调用我,我属于谁:str


字面式 (literal notation) 对象声明

var person = { name: “张三”, age: 26, gender: “男”, eat: function( stuff ) { alert( “我在吃” + stuff ); } }; person.height = 176; delete person[ “age” ];


使用构造器 (constructor) 创建对象

// 构造器 Person 本身是一个函数对象
function Person() { // 此处可做一些初始化工作
} // 它有一个名叫 prototype 的属性
Person.prototype = { name: “张三”, age: 26, gender: “男”, eat: function( stuff ) { alert( “我在吃” + stuff ); } } // 使用 new 关键字构造对象
var p = new Person();


对象的 __proto__ 属性和隐式引用

function Person( name ) { this.name = name; } var p = new Person(); // 对象的隐式引用指向了构造器的 prototype 属性,所以此处打印 true
console.log( p.__proto__ === Person.prototype ); // 原型本身是一个 Object 对象,所以他的隐式引用指向了 // Object 构造器的 prototype 属性 , 故而打印 true
console.log( Person.prototype.__proto__ === Object.prototype ); // 构造器 Person 本身是一个函数对象,所以此处打印 true
console.log( Person.__proto__ === Function.prototype );




利用原型链 Horse->Mammal->Animal 实现继承

// 声明 Animal 对象构造器
function Animal() { } // 将 Animal 的 prototype 属性指向一个对象,
// 亦可直接理解为指定 Animal 对象的原型
Animal.prototype = { name: animal", weight: 0, eat: function() { alert( "Animal is eating!" ); } } // 声明 Mammal 对象构造器 function Mammal() { this.name = "mammal"; } // 指定 Mammal 对象的原型为一个 Animal 对象。 // 实际上此处便是在创建 Mammal 对象和 Animal 对象之间的原型链 Mammal.prototype = new Animal(); // 声明 Horse 对象构造器 function Horse( height, weight ) { this.name = "horse"; this.height = height; this.weight = weight; } // 将 Horse 对象的原型指定为一个 Mamal 对象,继续构建 Horse 与 Mammal 之间的原型链 Horse.prototype = new Mammal(); // 重新指定 eat 方法 , 此方法将覆盖从 Animal 原型继承过来的 eat 方法 Horse.prototype.eat = function() { alert( "Horse is eating grass!" ); } // 验证并理解原型链 var horse = new Horse( 100, 300 ); console.log( horse.__proto__ === Horse.prototype ); console.log( Horse.prototype.__proto__ === Mammal.prototype ); console.log( Mammal.prototype.__proto__ === Animal.prototype );


使用 Simple Inheritance 实现类式继承

// 声明 Person 类
var Person = Class.extend( { _issleeping: true, init: function( name ) { this._name = name; }, isSleeping: function() { return this._issleeping; } } ); // 声明 Programmer 类,并继承 Person
var Programmer = Person.extend( { init: function( name, issleeping ) { // 调用父类构造函数
this._super( name ); // 设置自己的状态
this._issleeping = issleeping; } } ); var person = new Person( "张三" ); var diors = new Programmer( "张江男", false ); // 打印 true
console.log( person.isSleeping() ); // 打印 false
console.log( diors.isSleeping() ); // 此处全为 true,故打印 true
console.log( person instanceof Person && person instanceof Class && diors instanceof Programmer && diors instanceof Person && diors instanceof Class );


使用闭包实现信息隐藏

// 声明 User 构造器
function User( pwd ) { // 定义私有属性
var password = pwd; // 定义私有方法
function getPassword() { // 返回了闭包中的 password
return password; } // 特权函数声明,用于该对象其他公有方法能通过该特权方法访问到私有成员
this.passwordService = function() { return getPassword(); } } // 公有成员声明
User.prototype.checkPassword = function( pwd ) { return this.passwordService() === pwd; }; // 验证隐藏性
var u = new User( "123456" ); // 打印 true
console.log( u.checkPassword( "123456" ) ); // 打印 undefined
console.log( u.password ); // 打印 true
console.log( typeof u.gePassword === "undefined" );


全面理解面向对象的 JavaScript

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: