avalon 双工绑定以及一个按钮五个事件

<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head runat=”server”>
    <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
    <title></title>
    <script
src=”Content/js/jquery-1.11.1.min.js”></script>
    <script src=”Content/js/avalon.js”></script>
    <script type=”text/javascript”>

### 原型链的接头

      var count = 0;
        var model = avalon.define({
            $id: “test”,
            name: “hello”,
            passwd: “world”,
            profile: “”,
            isSure: false,
            fruit: “”,
            hobbies: [],
            airLine: “”,
            hotel: [],
            gender: “female”,
            isPay: false,
            str1: “1”,
            str2: “2”,
            str3: “3”,
            click0: function () {
                model.str1=”xxxxxx”+(count++)
            },
            click1: function () {
                model.str2 = “xxxxxx” + (count++)
            },
            click2: function () {
                model.str3 = “xxxxxx” + (count++)
            }
        });

#### 概念

    </script>
</head>
<body ms-controller=”test”>
    <input ms-duplex=”name” />
    <input ms-duplex=”passwd” /><br />

+
javascript每二个对象**归纳原型对象**都有一个内置的`proto`特性指向创设他的函数对象的原型对象,即`prototype`属性

    <ul>
        <li>{{name}}</li>
        <li>{{passwd}}</li>
        <li>{{name+passwd+”!”}}</li>
    </ul>
    <br />

#### 作用

    <input type=”radio” ms-duplex=”isSure”
/><span>{{isSure}}</span><br />
    <br />

+ 达成目的的后续

    <input type=”radio” ms-duplex-value=”fruit” value=”苹果”
name=”fruit” />苹果
    <input type=”radio” ms-duplex-value=”fruit” value=”雪梨”
name=”fruit” />雪梨
    <input type=”radio” ms-duplex-value=”fruit” value=”香蕉”
name=”fruit” />香蕉
    <span>{{fruit}}</span><br />
    <br />

### 理解

    <input type=”radio” value=”female”
ms-duplex-text=”gender”>女<br>
    <input type=”radio” value=”male”
ms-duplex-text=”gender”>男<br>
    性别:{{gender}}<br/>
    <br>

1.函数指标

 

+ 在javascript中,函数就是指标

    <input type=”radio” ms-duplex-boolean=”isPay”
value=”true”>是<br>
    <input type=”radio” ms-duplex-boolean=”isPay”
value=”false”>否<br>
    是不是付款:{{isPay}}<br>
    <br>

2.原型对象

    <br>
    <input type=”checkbox” ms-duplex=”hobbies” value=”PingPong”
name=”hobby”>乒乓球<br>
    <input type=”checkbox” ms-duplex=”hobbies” value=”Bedminton”
name=”hobby”>羽毛球<br>
    <input type=”checkbox” ms-duplex=”hobbies” value=”Basketball”
name=”hobby”>篮球<br><br />
    <span>{{hobbies}}</span>
    <br />
    <br />

+
当定义2个函数对象的时候,会含有二个预订的属性,`prototype`,那就属性称之为原型对象

    <select ms-duplex=”airLine”>
        <option
value=”beijing-guangzhou”>北京-广州</option>
        <option
value=”beijing-shenzhen”>北京-深圳</option>
        <option
value=”beijing-shanghai”>北京-上海</option>
    </select>
    <span ms-text=”airLine”></span>
    <br>

3.\__proto__

    <select ms-duplex=”hotel” multiple=”multiple”>
        <option
value=”迈阿密白云商务饭馆”>新德里白云商务旅舍</option>
        <option
value=”柏林(Berlin)红树湾大饭店”>卡拉奇红树湾酒吧</option>
        <option
value=”北京7天假日饭店”>北京7天假日饭馆</option>
    </select>
    <span>{{hotel}}</span>

+ javascript
在创设对象的时候,都会有八个\_proto\_的停放属性,用于指向创设它的函数对象的`prototype`。原型对象也有\_proto\_
属性。因而在时时刻刻的对准中,形成了原型链。

 

4.new

 

+ 当使用new关键字去调用构造函数就也就是履行啦

//三个按钮几个事件

5.constructor

 <div ms-click=”click0″ ms-click-1=”click1″
ms-click-2=”click2″><button>请点我</button></div>
    <div>{{str1}}</div>
    <div>{{str2}}</div>
    <div>{{str3}}</div>

+
原型对象prototype上都有个预定义的constructor属性,用来引用它的函数对象。那是一种循环引用

</body>

</html>

### 继承

 

+ **构造函数绑定**

图片 1图片 2

>
使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

//3个按钮八个事件

“`javascript
function test(name,height) {
this.name = name
this.height= height
};
function trys(age){
this.age = age
test.apply(this,[“张三”,”180cm”])
//apply(this,argument)第⑥个参数为转移this指向,第二个参数为三个伪数组每一项对应
调用apply的函数的形参。
//call(this,name,height)
第一个参数为this,后边参数为调用call的函数的形参。
}
let person = new trys;
person.age = “18”
console.log(person)
“`

图片 3

 

单击第三回:

+ prototype模式

图片 4

“`javascript
function test(name,height) {
this.name = name
this.height= height
this.do=function(hobby){
console.log(“我是”+this.name+”我今年”+this.age+”岁”+”身高”+this.height+”我喜欢”+hobby)
}
};
function trys(age){
this.age = age
}
trys.prototype =new test
trys.prototype.constructor = trys;
// trys.prototype =new test 将trys的constructor
属性指向了test,每贰个实例对象也会有一个constructor属性暗许指向prototype的constructor
属性,person.constructor==test
据此须求将trys的constructor属性重新指回trys
let person = new trys;
person.name = “张三”
person.age = 18
person.height = 180
person.do(“打羽球”)
console.log(person)
“`
![](http://p0zfk1qh0.bkt.clouddn.com/markdown001.png)

单击第一回(以此类推):

+ 直接接轨prototype
>
是对第①种方法的改良。由于person对象中,不变的本性都足以直接写入person.prototype。所以,大家也能够让man()跳过
person(),直接接轨person.prototype。

图片 5

“`javascript
function person (){
}
person.prototype.skill = “开车”
function man(){
this.hobby = “泡妞”
}
man.prototype = person.prototype;
man.prototype.constructor = man;
let xiaoming = new man ;
console.log(xiaoming.skill);
“`

 

  • 动用空对象作为中介

> 用第二种方法会改变person的constructor 的对准 所以有了那种方法
定义多少个空的
> 对象作为中介

“`javascript
function person (){
}
person.prototype.skill = “开车”
function man(){
this.hobby = “泡妞”
}
function F (){
}
F.prototype =person.prototype
man.prototype = new F()
man.prototype.constructor = man;
let xiaoming = new man ;
“`
> 大家将上面包车型客车存在延续封装

“`javascript
  function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
  }
“`

  • 拷贝继承

>把父对象的富有属性和方法,拷贝进子对象

“` javascript
function extend2(Child, Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
      c[i] = p[i];
      }
    c.uber = p;
  }
“`

  • 非构造函数继承
    “`javascript
    let person = {
    skill:”行走”
    }
    let xiaomming = {
    age:”18″
    }
    function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
      }
    let xiaoming = object(person)
    console.log(xiaoming.skill) //行走
    “`
  • 浅拷贝

***那般的正片有一个难点。那就是,借使父对象的性质等于数组或另贰个指标,那么实际上,子对象获得的只是二个内部存款和储蓄器地址,而不是的确拷贝,由此存在父对象被篡改的大概。***

“`javascript
let person = {
skill:”行走”
}
let xiaomming = {
age:”18″
}
function extendCopy(p) {
    var c = {};
    for (var i in p) {
      c[i] = p[i]; //遍历p对象,将p对象的每一个属性
都赋值给c对象的每一项
    }
    return c;
  }
let xiaoming = extendCopy(person);
console.log(xiaoming.skill)//行走
“`

  • 深拷贝

>”深拷贝”,便是能够完成真正意义上的数组和目的的正片。只要递归调用”浅拷贝”就行了。
“` javascript
let person = {
skill:”行走”
}
let xiaomming = {
age:”18″
}
  function deepCopy(p, c) {
    var c = c || {};
    for (var i in p) {
      if (typeof p[i] === ‘object’) {
        c[i] = (p[i].constructor === Array) ? [] : {};
        deepCopy(p[i], c[i]);
      } else {
         c[i] = p[i];
      }
    }
    return c;
  }
var xiaoming = deepCopy(person)
console.log(xiaoming.skill)
“`