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每1个对象**席卷原型对象**都有1个平放的`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 />

+
当定义三个函数对象的时候,会包蕴三个预约的属性,`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=”布拉迪斯拉发红树湾酒吧”>蒙特利尔红树湾酒吧</option>
        <option
value=”巴黎7天假期酒馆”>新加坡7天假期酒馆</option>
    </select>
    <span>{{hotel}}</span>

+ javascript
在创造对象的时候,都会有二个\_proto\_的放置属性,用于指向创建它的函数对象的`prototype`。原型对象也有\_proto\_
属性。由此在频频的针对中,形成了原型链。

 

4.new

 

+ 当使用new关键字去调用构造函数就一定于实践啦

//2个按钮五个事件

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)
“`