js属性扩展,继承,属性查找

JavaScript 是一种基于原型的面向对象语言

在 javaScript 中,每个对象都有一个它的原型(prototype)对象的引用,这个原型对象又有自己的原型,直到某个对象的原型为 null 为止,这种一级一级的链结构就称为原型链(prototype chain)。比如

定义一个object对象var o={},它的原型为Object.prototype,而Object.prototype的原型为null

下面为示例代码

<script type="text/javascript">

var o={name:"aa"};

function findPrototype(o) {

if(o!=null){

var a=  Object.getPrototypeOf(o);

console.info(a);

arguments.callee(a);

}

}

var a=function(){};

findPrototype(o);

findPrototype(a);

</script>

证明一下每个对象都有一个它的原型(prototype)对象的引用,下面是一段演示的代码

function  myDialog (id,title) {

this.title=title||"标题";

this.id=id;

this.show=function(){

console.info("窗体标题是:"+this.title);

}

}

//在myDialog 的原型上扩展一个move方法

myDialog.prototype.move=function(){

console.info("可以拖拽移动");

}

//创建两个对象

var d1=new myDialog("#win");

var  d2=new myDialog("#win");

//分别输出对象上的show函数,原型上的move是否相同,如果都相同,可以说对象没有它的原型(prototype)对象的引用,如果不同则说明每个对象都有一个它的原型(prototype)对象的引用

console.info(d1.show==d2.show);

console.info(d1.move==d2.move);

//输出结果为

说明每个对象都有一个它的原型(prototype)对象的引用

js属性扩展:

一般分为两种,一种是静态属性,一种是实例属性(非静态属性)

<script type="text/javascript">

function  myDialog (id,title) {

this.title=title||"标题";

this.id=id;

this.show=function(){

console.info("窗体标题是:"+this.title);

}

}

// 扩展静态属性,在方法上直接扩展myDialog,访问时直接方法.属性的方式访问,如myDialog.defaults.shade

myDialog.defaults={

resize:false,

shade:true,

}

//扩展静态方法,访问方式如Math.abs()的方式相同

myDialog.help=function(name){

console.info("查询"+name+"用法");

}

//实例属性,通过new之后访问

myDialog.prototype={

constructor:new myDialog,//将constructor修改回myDialog

open:function(){

console.info("打开")

},

close:function(){

console.info("关闭了");

}

}

myDialog.prototype.move=function(){

console.info("可以拖拽移动");

}

var d=new myDialog("#win","标题信息");

console.info(d);

</script>

继承基本上可以分为下面4种

1,基于原型链的继承

function  myDialog (title) {

this.title=title||"标题";

}

function alert(title,msg){

this.base=myDialog;

this.base(title);

this.msg=msg;

}

alert.prototype=new myDialog;

var a=new alert("标题1111","alert弹出框");

console.info(a);


2,拷贝继承

function  myDialog (options) {

var copy=this;

for(var key in options){//将传入的参数转化为myDialog的属性

copy[key]=options[key];

}

delete copy;

}

myDialog.prototype.type="对话框";

var d=new myDialog({title:"标题",content:"aaaa",shade:true});

console.info(d);

function alert(msg){

this.msg=msg;

}

//只能拷贝原型上的属性myDialog.prototype

for(var key in myDialog.prototype){

alert.prototype[key]=myDialog.prototype[key];

}

var a=new alert("alert弹出框");

console.info(a);

3,ECMAScript 5继承方式

function  myDialog (title) {

this.title=title;

}

myDialog.prototype.type=‘弹出框‘;

function alert(msg){

this.msg=msg;

}

alert.prototype = Object.create(myDialog.prototype);

var a=new alert("alert弹出框");

console.info(a);

console.info(a instanceof myDialog );

4,使用call() / apply() 方法实现继承

function  myDialog (title) {

this.title=title||"标题";

}

function alert(title,msg){

myDialog.call(this,title);

this.msg=msg;

}

var a=new alert("标题11111","alert弹出框");

console.info(a);

使用 javascript 的 call() 方法相对明了一些

属性查找

在访问一个对象的属性时,JavaScript 将执行下面的步骤:

检查本地值是否存在。如果存在,返回该值。

如果本地值不存在,检查原型链(通过 __proto__ 属性)。

如果原型链中的某个对象具有指定属性的值,则返回该值。

如果这样的属性不存在,则对象没有该属性。

时间: 2024-08-27 04:46:43

js属性扩展,继承,属性查找的相关文章

JS 本地属性与继承属性

判断是否拥有某种属性 1.in 运算符 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 2.hasOwnProperty方法 var obj = {name:'jack'}; obj.hasOwnProperty('name'); // --> true obj.hasOwnProperty('toString'); // --> fal

js对象中的属性检测

最近项目里遇到一个问题,页面加载时候对window对象进行渲染,渲染过程中对window增加了一个对象obj,之后又加载一个文件,向obj增加了一个属性para,但这个过程是异步的. 之后需要检测window是否有obj对象,而obj对象是否有para属性.由于是异步的.执行这个操作时候可能并没有渲染至para上,这时候需要使用if..else..进行另一套操作. 这时候遇到一个问题,如何判断window对象是否有obj对象,且obj对象是否有para属性? 之前使用的是'obj' in win

[转] JavaScript中的属性:如何遍历属性

在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上层原型上继承一些属性.第二个原因是,JavaScript中的属性不光有值,它还有一些除了值以外的其他特性,其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true,则称这个属性是可枚举的,否则反之. 知道了这些,我们就可以把属性的遍历分为四种情况. 注:示例代码中

关于 JS 面向对象继承属性和方法的小例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>关于 JS 面向对象继承属性和方法的小例子</h1> </body> </html> <script> //人的构造函

js最好的继承机制:用对象冒充继承构造函数的属性,用原型链继承 prototype 对象的方法。

js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA.prototype.sayColor = function () { alert(this.color); }; function ClassB(sColor, sName) {//在 ClassB 构造函数中,用对象冒充继承 ClassA 类的 sColor 属性 ClassA.call(th

JS中如何实现属性和方法的继承

JS中面向对象的实现: function Person(name,color){ this.name = name; this.color = color; } Person.prototype.showName = function(){ alert(this.name); } Person.prototype.showColor = function(){ alert(this.color); } function Worker(name,color,job,age){ Person.app

JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

前  言 上一篇博客(https://www.cnblogs.com/qdjianghao/p/10177360.html )中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方法.静态属性/方法.原型属性/方法,并且一起来探讨一下JS中的原型与原型链. 一 成员属性与成员方法 在构造函数中,通过this.属性声明.或者实例化出对象后,通过"对象.属性"追加的.都属于成员属性

34、JavaScript面向对象(内置构造函数&amp;相关方法|属性|运算符&amp;继承&amp;面向对象)

一.面向对象 1.1 this的指向问题 要看清楚最终的函数调用者是谁. IIFE也被当做函数直接运行,IIFE的this都是window对象 函数的arguments是类数组对象,比如传入的第0项参数是函数,让它运行:arguments0,函数中的上下文是arguments对象.还要知道函数的length和arguments.length的区别. 1.2构造函数 当一个函数用new运算符调用时,此时这个函数叫"构造函数"(constructor) 构造函数四步走 创建一个新空对象 t

js对象字面量属性间相互访问的问题 和 这个问题与执行环境的关系

对象字面量属性间无法相互访问的问题: 我曾经在定义一个对象时, 并出于复用性的考虑试图复用某些属性: // test 1 var person = { firstName : "Bill", lastName : "Gates", fullName : firstName + " " + lastName // 这里报错 } alert(person.firstName); alert(person.lastName); alert(person