|
|
@@ -0,0 +1,110 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ /**
|
|
|
+ * es5
|
|
|
+ */
|
|
|
+ function Phone(brand,price){
|
|
|
+ this.brand = brand
|
|
|
+ this.price = price
|
|
|
+ }
|
|
|
+
|
|
|
+ Phone.prototype.call = function(){
|
|
|
+ console.log('dadianhua')
|
|
|
+ }
|
|
|
+
|
|
|
+ let huawei = new Phone('华为',5000)
|
|
|
+ huawei.call()
|
|
|
+ console.log(huawei)
|
|
|
+ /**
|
|
|
+ * es6
|
|
|
+ */
|
|
|
+ class Phone1{
|
|
|
+ constructor(brand,price){
|
|
|
+ this.brand = brand
|
|
|
+ this.price = price
|
|
|
+ }
|
|
|
+ call(){
|
|
|
+ console.log('es6 dadianhua ')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let onePlus = new Phone1('1+',1999)
|
|
|
+
|
|
|
+ console.log(onePlus)
|
|
|
+
|
|
|
+ /**
|
|
|
+ * es5 继承
|
|
|
+ */
|
|
|
+ function sonPhone(brand,price,color,size){
|
|
|
+ Phone.call(this,brand,price)
|
|
|
+ this.color = color
|
|
|
+ this.size = size
|
|
|
+ }
|
|
|
+
|
|
|
+ // 继承原型
|
|
|
+ sonPhone.prototype = new Phone
|
|
|
+ sonPhone.prototype.constructor = sonPhone
|
|
|
+
|
|
|
+ sonPhone.prototype.photo = function(){
|
|
|
+ console.log('take')
|
|
|
+ }
|
|
|
+ sonPhone.prototype.playGame = function(){
|
|
|
+ console.log('play')
|
|
|
+ }
|
|
|
+
|
|
|
+ const chuizi = new sonPhone('chuizi',4999,'black','6.5')
|
|
|
+ console.log(chuizi)
|
|
|
+
|
|
|
+ /**
|
|
|
+ * es6类继承
|
|
|
+ */
|
|
|
+ class sonPhone1 extends Phone1{
|
|
|
+ constructor(brand,price,color,size){
|
|
|
+ super(brand,price) // xxx.call(this,brand,price)
|
|
|
+ this.color = color
|
|
|
+ this.size = size
|
|
|
+ }
|
|
|
+ photo(){
|
|
|
+ console.log('take')
|
|
|
+ }
|
|
|
+ playGame(){
|
|
|
+ console.log('play')
|
|
|
+ }
|
|
|
+ //子类重写
|
|
|
+ call(){
|
|
|
+ console.log('xiaomi call')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const xiaomi = new sonPhone1('xiaomi',2999,'red','5.5')
|
|
|
+ console.log(xiaomi)
|
|
|
+
|
|
|
+ /**
|
|
|
+ * class中的getter&setter
|
|
|
+ * 对象中的属性进行绑定
|
|
|
+ * 类似php魔术方法
|
|
|
+ */
|
|
|
+ class Phone2{
|
|
|
+ get price(){
|
|
|
+ console.log('read price')
|
|
|
+ return 'hi'
|
|
|
+ }
|
|
|
+ set price(val){
|
|
|
+ console.log('change price')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let p = new Phone2()
|
|
|
+ console.log(p.price)
|
|
|
+ p.price = 20
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
