美文网首页
12.3默写

12.3默写

作者: css7 | 来源:发表于2017-12-02 17:27 被阅读0次
  • 封装tab选项卡
function Tab(id){
    //this=>实例对象 这个实例对象下面有三个属性
    this.oParent = document.getElementById(id);
    this.aInput = this.oParent.getElementsByTagName("input");
    this.aDiv = this.oParent.getElementsByTagName("div");
}
Tab.prototype.init=function(){
    var This = this;//存储tab实例对象
    for(var i = 0; i<this.aInput.length; i++){
        this.aInput[i].index = i;//添加自定义属性
        this.aInput[i].onclick = function(){
            //this==>btn,期望实例对象去掉用change
            This.change(this);
        }
    }
}
Tab.prototype.change = function(obj){
    for(var j = 0; j<this.aInput.length; j++){
        //aInput[j] aDiv[j]
        this.aInput[j].className="";
        this.aDiv[j].style.display = "none";
    }
    obj.className = "active";//这里的this期望指的是btn
    //当this发生冲突的时候,保大对象
    this.aDiv[obj.index].style.display = "block";
}

window.onload = function(){
    var t1 = new Tab("div1");
    t1.init();
    var t2 = new Tab("div2");
    t2.init();
    var t3 = new Tab("div3");
    t3.init();
}
  • 拷贝继承
//掌握拷贝继承,了解原型继承和类式继承
function CreatePerson(name,sex){
    this.name = name;
    this.sex = sex;
}
CreatePerson.prototype.showName = function(){
    alert(this.name);
}
var p1 = new CreatePerson("zhangsan","男");
//p1.showName();
//现在来一个学生类 属性:name,sex,address
//分析:一个学生类:属性和方法 分开继
function Student(name,sex,address){
    //继承父类,人类 name,sex  this==>学生
    CreatePerson.call(this,name,sex);
    //name,sex继承成功,把CreatePerson的th指向指向到当前student类
    this.address = address;
}
extend(CreatePerson.prototype,Student.prototype);
function extend(obj1,obj2){
    for(var attr in obj1){
        obj2[attr] = obj1[attr];
    }
}
var s1 = new Student("lisi","女","武汉");
s1.showName();
  • 原型继承
var a = {
    name:"张三"
}
var b  = cloneObj(a);//没有用有用到new
function cloneObj(obj){
    //创建一个代理函数
    var F = function(){};
    F.prototype = obj//用代理函数接收要被继承的对象
    return new F();//返回的是代理函数的实例
}
alert(b.name);
b.name = "李四"
alert(a.name);

相关文章

网友评论

      本文标题:12.3默写

      本文链接:https://www.haomeiwen.com/subject/cbnnbxtx.html