温馨提示×

温馨提示×

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

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

JavaScript面向对象

发布时间:2020-07-18 16:27:24 来源:网络 阅读:421 作者:mirindaRain 栏目:web开发

欢迎关注博主的网络课堂:http://edu.51cto.com/course/15019.html

JavaScript面向对象

JavaScript中创建对象的方式

普通创建方式

<script type="text/javascript">
        var obj = new Object();
        //动态添加属性
        obj.name="张三";
        obj.age = 15 ;
        obj["addr"]="铜锣湾";
        obj.sayHello=function(){
            console.log("姓名:"+this.name+",年龄"+this.age+",地址:"+this.addr);
        }
        obj.sayHello();
        //动态删除属性
        delete obj.addr;
        obj.sayHello();
</script>

在js中,属性可以动态添加,也可以动态删除

通过json格式创建对象

json的格式的表现形式

表现形式1

JavaScript面向对象

<script type="text/javascript">
        var obj={"name":"zhangsan","age":15,"addr":"南京"};
        console.log(obj.name,obj.age,obj.addr);
        console.log(typeof obj);
 </script>

表现形式2

JavaScript面向对象

注意:value的取值可以是以下内容

JavaScript面向对象

对于以上的结构,那么json的变种就非常丰富

案例1:

var obj=["张三",15,true,
                {
                    "fatherName":"张无忌",
                    "motherName":"无忌张", 
                    children:["张飞","张亮","张靓颖"]
                }
        ];
alert(typeof obj)
alert(obj[0]);
alert(obj[3]["children"])

案例2:

 var obj3= {
            "name":"zhangsan",
            "age":15,
            children:[
                {
                  name:"张一",
                  age:1
                },
                {
                    name:"lisi",
                    age:10
                },
                {
                    name:"wangwu",
                    age:12
                }
            ],
            sayInfo:function(){
                console.log(this.name,this.age);
            }
 };
obj3.sayInfo();
for(var i = 0 ;i<obj3.children.length;i++) {
  console.log(obj3.children[i].name,obj3.children[i].age)
}   

工厂方法创建对象

function createObject(name,age){
            var obj = new Object();
            obj.name = name ;
            obj.age = age
            obj.sayHello=sayHello;
            return obj ;
 }
var sayHello=function(){
    console.log(this.name,this.age);
}
var obj1 = createObject("张三",12);
obj1.sayHello();
var obj2 = createObject("李四",20);
obj2.sayHello();

构造函数创建的对象

<script type="text/javascript">
function Person(name,age){
  this.name = name ;
  this.age  =age ;
  this.sayHello= sayHello;
}
function sayHello(){
    console.log(this.name,this.age)
}
//隐藏了一个创建的对象的过程
var p1 =new Person("张三",12);
var p2 = new Person("李四",15);
p1.sayHello();
p2.sayHello();
</script>

采用原型创建对象

<script type="text/javascript">
        function Person(name,age){
            this.name = name ;
            this.age = age ;
        }
        Person.prototype.sayHello = function(){
            console.log(this.name,this.age);
        }
        var p1  = new Person("张三",15);
        var p2  = new Person("lisi",16);
        p1.sayHello();
        p2.sayHello();
</script>

使用原型+构造函数方式来定义对象,对象之间的属性互不干扰,各个对象间共享同一个方法

优化上面的案例

<script type="text/javascript">
        function Person(name,age) {
            this.name = name ;
            this.age = age ;
            //第一次创建对象的,通过参数给原型上增加一个共享的方法
            if(typeof Person.prototype.flag==="undefined") {
                alert("invoked...");
                Person.prototype.sayInfo = function(){
                    console.log(this.name,this.age)
                };
                Person.prototype.flag = true ;
            }
        }
        var  p1 = new Person("zhangsan",12);
        var  p2 = new Person("lisi",15);

        p1.sayInfo();
        p2.sayInfo()
</script>

JavaScript中的继承机制

对象冒充

function Parent(name,age) {
  this.name= name ;
  this.age = age ;
  this.sayInfo = function(){
    console.log(this.name,this.age) ;
  }
 }
function Son(name,age,addr) {
  this.method=Parent;
  this.method(name,age);
  this.addr = addr ;
  //将自定义的method方法删除掉
  delete this.method;
  this.sayInfo=function(){
    console.log(this.name,this.age,this.addr) ;
  }
}

apply和call方法

function Parent(name,age) {
  this.name = name ;
  this.age = age ;
  this.sayInfo=function(){
    console.log(this.name,this.age);
  };
}

function Son(name,age,addr) {
  //call接受的离散的值,apply的参数为数组
  //Parent.call(this,name,age);
  Parent.apply(this,new Array(name,age));
  this.addr = addr ;
  this.sayInfo=function(){
    console.log(this.name,this.age,this.addr);
  }
}
var s = new Son("张三",15,"北京");
console.log(s)
s.sayInfo();

原型混合方式

<script type="text/javascript">
        //apply|call+原型混合方式
        function Parent(name,age) {
            this.name = name ;
            this.age = age ;

        }
        Parent.prototype.sayInfo=function(){
            console.log(this.name,this.age);
        }

        function Son(name,age,addr) {
            //只能做属性复制
            Parent.apply(this,new Array(name,age));
            this.addr = addr ;
        }
        //拿原型中方法
        Son.prototype=new Parent();
        var s = new Son("zhangsan",12);
        console.log(s)
<script>
向AI问一下细节

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

AI