谈一谈javascript中继承的多种方式
JS 是没有继承的,不过可以曲线救国,利用构造函数、原型等方法实现继承的功能。
var o=new Object();
其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属性与方法。那么为什么能访问Object对象的方法,其实访问的是其原型对象的方法,所有的方法都是放在原型中而不是类中。
console.log(o.__proto__ === Object.prototype) // true 继承的本质 console.log(o.__proto__ === Object); console.log(Object.__proto__ === Function.prototype); console.log(Function.prototype.__proto__ === Object.prototype); console.log(Number.__proto__ === Function.prototype);
object是万物祖先,Everything is object 嘛。
1、内置对象都继承自object
var myNumber = new Number(10); //实例化一个数字对象
字符串对象,其实是String对象的一个实例化
var s = ‘str';
除了可以访问自身属性方法,还能访问父类属性方法
console.log(s.toUpperCase()); console.log(s.toString());
2、自定义对象的继承
// 父类 var Person = function(){ this.name='AV老师'; this.test='测试中的毕福剑'; } Person.prototype={ say:function(){ console.log('呀买碟'); } } // 构造函数 var Canglaoshi = function(name,age,cup){ this.name=name; this.age=age; this.cup=cup; } // 继承person,则拥有person原型中的方法 Canglaoshi.prototype=new Person(); Canglaoshi.prototype.ppp=function(){ console.log('啪啪啪'); } // 苍老师拥有了person中的方法 var xiaocang=new Canglaoshi('空空',18,'E'); xiaocang.say(); console.log(xiaocang.name); console.log(xiaocang.age); console.log(xiaocang.cup); console.log(xiaocang.test);
3、自定义对象继承的原型链演示
(function() { //父类 function SuperParent() { this.name = 'mike'; } //子类继承父亲 - 二次继承: function Parent() { this.age = 12; } Parent.prototype = new SuperParent(); //通过原型,形成链条 var parent = new Parent(); console.log("测试父亲可以访问爷爷属性:" + parent.name); console.log("测试父亲可以访问自己的属性:" + parent.age); //继续原型链继承 - 三次继承 function Child() { //brother构造 this.weight = 60; } Child.prototype = new Parent(); //继续原型链继承 //原型链测试2 //儿子集成爷爷 var child = new Child(); console.log("测试儿子可以访问爷爷的属性:" + child.name); //继承了Parent和Child,弹出mike console.log("测试儿子可以访问父亲的属性:" + child.age); //弹出12 console.log("测试儿子可以访问自己独特的属性:" + child.weight); //弹出12 //原型链测试 //爷爷可以访问Object中的方法 var test = new SuperParent(); console.log(test.name); console.log(test.toString()); //访问链: SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象(找到toString方法)--》null console.log(child.name); //原型链:首先访问Child构造函数,发现没有name属性--》寻找__proto__,判断起指针是否为空--》指向Child原型函数,寻找有没有name属性--》 //---》没有找到,则判断其__proto__属性是否为null,如果不为null,继续搜索--》找到parent对象,检查是否有name属性,没有。。。。 })()
4、构造函数继承
(function() { function People() { this.race = '人类'; } People.prototype = { eat: function() { alert('吃吃吃'); } } /*人妖对象*/ function Shemale(name, skin) { People.apply(this, arguments); // 用call也是一样的,注意第二个参数 this.name = name; this.skin = skin; } //实例化 var zhangsan = new Shemale('张三', '黄皮肤') console.log(zhangsan.name); //张三 console.log(zhangsan.skin); //黄皮肤 console.log(zhangsan.race); //人类 })()
5、组合继承
(function() { function Person(name, age) { this.name = name; this.age = age; } Person.prototype.say = function() {} function Man(name, age, no) { /*会自动调用Person的方法,同时将name age传递过去*/ Person.call(this, name, age); //自己的属性 this.no = no; } Man.prototype = new Person(); var man = new Man("张三", 11, "0001"); console.log(man.name); console.log(man.age); console.log(man.no); })()
6、拷贝继承
<script> +(function() { var Chinese = { nation: '中国' }; var Doctor = { career: '医生' }; // 请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象? // 这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。 function extend(p) { var c = {}; for (var i in p) { c[i] = p[i]; } c.uber = p; return c; } var Doctor = extend(Chinese); Doctor.career = '医生'; alert(Doctor.nation); // 中国 })() </script>
7、寄生组合继承
<script> +(function() { /*继承的固定函数*/ function inheritPrototype(subType, superType) { var prototype = Object(superType.prototype); prototype.constructor = subType; subType.prototype = prototype; } function Person(name) { this.name = name; } Person.prototype.say = function() {} function Student(name, age) { Person.call(this, name); this.age = age; } inheritPrototype(Student, Person); var xiaozhang = new Student('小张', 20); console.log(xiaozhang.name) })() </script>
8、使用第三方框架实现继承
<script src='simple.js'></script> <!-- 使用的第三方框架simple.js --> <script> +(function() { < script > var Person = Class.extend({ init: function(age, name) { this.age = age; this.name = name; }, ppp: function() { alert("你懂的"); } }); var Man = Person.extend({ init: function(age, name, height) { this._super(age, name); this.height = height; }, ppp: function() { /*调用父类的同名方法*/ this._super(); /*同时又可以调用自己的方法*/ alert("好害羞 -,- "); } }); var xiaozhang = new Man(21, '小张', '121'); xiaozhang.ppp(); })()
希望对大家学习javascript程序设计有所帮助。
javascript轻量级库createjs使用Easel实现拖拽效果
我就把我学习Createjs的一些心得体会向大家分享下:一.什么是CreateJScreatejs是一个轻量级的javascript库,是一套可以构建丰富交互体验的HTML5游戏的开源工
复杂的javascript窗口分帧解析
什么是窗口分帧?窗口分帧就是把一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件,每个帧(即页面)都有自己的url。帧窗
学习javascript文件加载优化
在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行。所