温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JS面向对象

发布时间:2020-08-05 21:40:06 来源:网络 阅读:325 作者:心月草 栏目:web开发
1.创建对象
window.onload=function(){
        //1.工厂模式:
        function student1(name,qq){
                var obj=new Object();
                obj.name=name;
                obj.qq=qq;
                obj.show=function(){
                        alert(this.name+":"+this.qq);
                }
                return obj;
        }
        var s1=student1("HH","123");
        console.log(s1);

        //2.构造函数:
        function Student2(name,qq){
                this.name=name;
                this.QQ=qq;
                this.show=function(){
                        alert(this.name+":"+this.QQ);
                }
        }
        var s2=new Student2("HH","1234");
        console.log(s2);

        //3.字面量方式:
        var s3={
                "name":"HH",
                "QQ":"12345",
                show:function(){
                        alert(this.name+":"+this.QQ);
                //alert(name+":"+QQ);//错误!!!
                }
        }
        //s3.show();
        //console.log(s3.name+":"+s3.QQ);
        console.log(s3);
        //我们在定义函数的时候,函数本身就会默认有一个prototype的属性,而我们用new运算符来生成一个对象的时候就没有prototype属性。如:
        console.log(s1.prototype);//undefined;
        console.log(student1.prototype);//Object;
        console.log(s2.prototype);//undefined;
        console.log(Student2.prototype);//Object;
        console.log(s3.prototype);//undefined;

        function Student4(){ };
        Student4.prototype = {
                name:"fdf",
                age:"fd",
                //字面量创建的方式使用constructor属性不会指向实例  而是指向object
                // 强制修改
                constructor :Student
        };
        var s4 = new  Student();
        alert(s4.constructor);
}
2.原型
window.onload=function(){
        function Student(){};
        Student.prototype.name="HH";
        Student.prototype.show=function(){
                alert("I am "+this.name);
        }

        var s=new Student();
        //s.show();
        //alert(s.name);
        Student.prototype.name="FF";
        //alert(s.name);
        //原型方式创建对象的缺陷:1.不能传参; 2.一改全改

        function Student1(){
                this.name="FF";
        };
        Student1.prototype.name="HH";
        Student1.prototype.show=function(){
                alert("I am "+this.name);
        }
        var s1=new Student1();

        console.log(s1.name);//FF
        console.log(s1.__proto__.name);//HH
        console.log(Student1.prototype.name);//HH

        Student1.prototype.name="O_O";

        console.log(s1.name);//FF
        console.log(s1.__proto__.name);//O_O
        console.log(Student1.prototype.name);//O_O

        //通过原型改变的属性和方法不会改变对象原有的属性和方法
}
3.混合模式
window.onload=function(){
        //混合模式: 构造函数+原型
        function Student(name,QQ){
                this.name=name;
                this.QQ=QQ;
                if(typeof this.show != "function"){
                        Student.prototype.show=function(){
                                //alert(this.name+":"+this.QQ);
                                console.log(this); // this指s1
                        }
                }
        }
        var s1=new Student("MM","1242");
        s1.show();
        var s2=new Student("QQ","w809r809ew");
        console.log(s1.show==s2.show);//true;通过Student创建的对象共用函数show,其保存在Student的原型中,故引用地址是一样的。
}
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI